I have used javascript to dynamically produce form fields in the form i used using addInput() function in javascript... but after i trigger javascript code and submit the form PHP code cannot access form field elements....
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" method="post">
University Name: <input type="text" name="college">
No. of branches:
<div id="dynamicInput">
<select name="branches" id="branches" onchange="if (this.selectedIndex) addInput('dynamicInput');;" ">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<script>
var counter = 0;
var limit = 3;
function addInput(divName)
{ var counter = 0;
var k=parseInt(document.getElementById("branches").value);
var newdiv;
while(k>0)
{
newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + counter + " <br><input type='text' name='branch["+counter+"]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
k--;
}
}
</script>
<input type="submit" value="submit" />
</form>
</body>
</html>
and the php code lets assume like this:
<?php
$name=$_POST["college"];
$text=$_POST["branch[0]"];
echo $name." ".$text"
?>
Related
I'm want to show php include based on the drop down menu choice.
But the trick is that I want to show the include before submitting the page.
<?php include 'page.php'; ?>
<select name="s1"style="width: 70px;" >
<optgroup label="My Input">
<option value="">Select...</option>
<option value="one kind</option>
<option value="second kind</option>
</select>
How can I show my page based on option selected before page is submited?
I found it!
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
What I'm attempting to do with the below code is call a PHP function from an drop-down menu.
Is there a clean way of doing this?
code:
<html>
<head>
</head>
<body>
<?php
function OnSelectionChange() {
echo("OK IT WORKS");
}
?>
<section>
<select onchange="OnSelectionChange()">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</section>
</body>
</html>
You can get the selected value from the drop down list simply using php without using JavaScript.
<html>
<head>
<title>Country</title>
</head>
<body>
<form method="POST" action="">
Select Your Country
<select name="country" onchange="this.form.submit()">
<option value="" disabled selected>--select--</option>
<option value="india">India</option>
<option value="us">Us</option>
<option value="europe">Europe</option>
</select>
</form>
<?php
if(isset($_POST["country"])){
$country=$_POST["country"];
echo "select country is => ".$country;
}
?>
</body>
</html>
simple ajax using jquery
index page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myDropDown').change(function(){
//Selected value
var inputValue = $(this).val();
alert("value in js "+inputValue);
//Ajax for calling php function
$.post('submit.php', { dropdownValue: inputValue }, function(data){
alert('ajax completed. Response: '+data);
//do after submission operation in DOM
});
});
});
</script>
</head>
<body>
<select id="myDropDown">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</body>
</html>
in submit.php
<?php
function processDrpdown($selectedVal) {
echo "Selected value in php ".$selectedVal;
}
if ($_POST['dropdownValue']){
//call the function or execute the code
processDrpdown($_POST['dropdownValue']);
}
for simple js ajax use XMLHttpRequest
Does not connect onchange event with php function.
must use javascript function
<script>
function OnSelectionChange()
{
alert("OK IT WORKS");
}
</script>
<html>
<head>
<title>Country</title>
</head>
<body>
<form>
Select Your Country
<select name="country" onchange="this.form.submit()">
<option value="" disabled selected>--select--</option>
<option value="india">India</option>
<option value="us">Us</option>
<option value="europe">Europe</option>
</select>
</form>
<?php
if(isset($_GET["country"])){
$country=$_GET["country"];
echo "select country is => ".$country;
}
?>
</body>
</html>
Can't do that, use JavaScript function instead
<html>
<head>
</head>
<body>
<script>
function OnSelectionChange()
{
alert("OK IT WORKS");
}
</script>
<section>
<select onchange="OnSelectionChange()">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</section>
</body>
</html>
This mild adaptation has worked well for me. So very many thanks to vivekcs0114 and furthermore nicely avoids JS and the required Ajax solution which after around 200 miserable attempts has been a total disaster.
<form method="post" action="">
<select method="post" name="areasel" onchange="this.form.submit()">
<option value="Choose one">Choose one</option>
<option value="Complete Airframe">Complete Airframe</option>
<option value="Armstrong Siddeley">Armstrong Siddeley</option>
<option value="Something">Something</option>
</select>
</form>
<?php
if(isset($_POST["areasel"]))
{
$type=$_POST["areasel"];
echo "<BR>Do some SQL stuff using :".$type;
}
?>
I have a form in which I have a list of Indian States and Cities. On selecting one of the states, the cities from that state are to be displayed in the <select> to show cities. I am using a php script hosted somewhere (a similar website) and I think that it can solve my purpose. The script takes the value of State options as parameter and returns a <select> with the corresponding cities.
The script is http://www.indane.co.in/state.php?stateid=2196 where 2196 is the ID/value of the selected state.
I need to display contents of this in my cities' .
Please suggest me how can I do this.
So far I have tried this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function showcat(id,ss,type)
{
var cid=id.value;
if(type=='state')
{
document.getElementById("state_loading").style.visibility="visible";
var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
var id=document.getElementById('bgcity');
id.innerHTML=response;
}
}
function httpGet(theUrl)
{
var xHRObject = new XMLHttpRequest();
var url = theUrl;
xHRObject.open("GET", url, true);
xHRObject.send();
xHRObject.onreadystatechange = function () {
if (xHRObject.readyState==4 && xHRObject.status==200) {
var response = xHRObject.responseText;
return response;
}
}
}
</script>
</head>
<body>
<select name="bgstate" id="bgstate" style="width:200px" onChange="showcat(this,'sub1','state');">
<option value="">[ SELECT STATE ]</option>
<option value="2169" >Andhra Pradesh</option>
<option value="2196" >Arunachal Pradesh</option>
<option value="2170" >Assam</option>
<option value="2171" >Bihar</option>
<option value="5267" >Chhattisgarh</option>
<option value="2174" >Delhi</option>
<option value="2199" >Goa</option>
<option value="2175" >Gujarat</option>
<option value="2176" >Haryana</option>
<option value="2177" >Himachal Pradesh</option>
<option value="2178" >Jammu and Kashmir</option>
<option value="5268" >Jharkhand</option>
<option value="2185" >Karnataka</option>
<option value="2179" >Kerala</option>
<option value="2181" >Madhya Pradesh</option>
<option value="2182" >Maharashtra</option>
<option value="2183" >Manipur</option>
<option value="2184" >Meghalaya</option>
<option value="2197" >Mizoram</option>
<option value="2186" >Nagaland</option>
<option value="2187" >Orissa</option>
<option value="2189" >Punjab</option>
<option value="2190" >Rajasthan</option>
<option value="2195" >Sikkim</option>
<option value="2191" >Tamil Nadu</option>
<option value="2192" >Tripura</option>
<option value="5269" >UNION TERRITORY</option>
<option value="2193" >Uttar Pradesh</option>
<option value="5259" >Uttaranchal</option>
<option value="2194" >West Bengal</option>
</select>
<span id="state_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>
</td>
</tr>
<br/>
<tr valign="top">
<td> </td>
<td height="25" >City <span class="error">*</span></td>
<td colspan="2">
<span id="sub1">
<select name="bgcity" style="width:200px" id="bgcity" >
<option value="">[SELECT CITY]</option>
</select>
</span>
<span id="city_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>
<input type="button" value="Search" onClick="showcat(document.getElementById('bgcity'),'sub2','city');" style="cursor:pointer;" />
</tr>
</body>
</html>
Problem 1-The problem is the URL for city dropdown is returning a selectbox and you are replacing the options of the selectbox in your page with another selectbox
Another problem is access-control-allow-origin header.
Replace the city drop down in your page with the following
<span id="bgcity">
<select name="bgcity" style="width:200px" >
<option value="">[SELECT CITY]</option>
</select>
</span>
Change your showcat as
function showcat(id,ss,type)
{
var cid=id.value;
if(type=='state')
{
document.getElementById("state_loading").style.visibility="visible";
var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
if(response !== undefined)
{
var id=document.getElementById('bgcity');
id.innerHTML=response;
}
}
}
I have removed the id associated with the select box to the span so that it replaces the whole drop down..and remove the second parameter in your showcat function as this change will give error...
I've got an HTML form that has some static fields and some fields that are dynamically added with javascript. It looks sort of like this
<html>
<script type="text/javascript">
window.onload = function()
{
var select = document.getElementById("select");
var texts = document.getElementById("texts");
select.onchange = function()
{
var val = select.options[select.selectedIndex].value;
texts.innerHTML = "";
for(i=0; i < val; i++)
{
//texts.innerHTML += '<div><input type="text" name="t_' + i + '" value="select_' + i + '" /></div>';
texts.innerHTML += i + '<div><input type="text" name="t_' + i + '" /></div>';
}
}
}
</script>
<body>
<form method="POST" action="connection.php">
Question:<br>
<textarea name="question" cols="35" rows="5"></textarea><br>
<select id="select" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<div id="texts"></div>
<input type="submit" name="Submit" value="Submit" >
</form>
</body>
</html>
when the user clicks it adds a text box field. How does the data stored into the database.Kindly suggest me an idea what are the resources used to do this .Thanks in advance
Good day Shashak
In order to submit the data of your form into the database, regardless of the javascript of the form the data should be passed using in your case the POST method to a script 'connection.php' in your case.
This script should contain a way to connect to your database followed by the logic that will validate your data and then at the end if the validation is successful a database query that will INSERT the data into your database.
Which is your level of understanding when it comes to PHP or any other server-side scripting language and databases? - I will be able to give you more information if I know what you know.
I think instead of giving the textbox the name format t_1 , t_2 you can give it as an array like below
<html>
<script type="text/javascript">
window.onload = function()
{
var select = document.getElementById("select");
var texts = document.getElementById("texts");
select.onchange = function()
{
var val = select.options[select.selectedIndex].value;
texts.innerHTML = "";
for(i=0; i < val; i++)
{
//texts.innerHTML += '<div><input type="text" name="t_' + i + '" value="select_' + i + '" /></div>';
texts.innerHTML += i + '<div><input type="text" name="txt_name[]" /></div>';
}
}
}
</script>
<body>
<form method="POST" action="connection.php">
Question:<br>
<textarea name="question" cols="35" rows="5"></textarea><br>
<select id="select" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<div id="texts"></div>
<input type="submit" name="Submit" value="Submit" >
</form>
</body>
</html>
PHP
It will post data like this:
Suppose you select option 2.
$inputs = $_REQUEST['t']; // change the name like this name[]
$textarea = $_REQUEST['textarea'];
$selectbox = $_REQUEST['select']; // you should define the name of the select box as i used 'select'
insert into mysql
$conn = mysql_connect('localhost', 'db user', 'db password');
mysql_select_db('database name');
for($i=0; i<count($inputs); $i++) {
$sql = "insert into <table name> (textarea, inputs) values ($inputs[$i], $textarea)";
mysql_query($sql);
}
it will store each row as per your selection of input text boxes.
Note: Modify the query as per your requirement.
I want to display a number of textboxes in a form based on the selected option from a dropdown listbox.
For example, if user selects 1 then 1 textbox should be shown and if user selects 2 then 2 textboxes should be displayed. And I need to do it in PHP.
I found some answers using jQuery. Can we use jQuery inside PHP? If yes, then how?
Edit
#Edwin Alex
This is how my select option looks like.
<h2><u>DEPENDENT DETAILS</u></h2><br />
<table border="1" style="border-style:dotted" width="100%" id="dependenttable">
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td></tr>
<tr id="textboxDiv"></tr>
At the end of file inside <> these I have written your code.
You can use Jquery to get this. Try this,
HTML :
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td>
</tr>
<tr id="textboxDiv"></tr>
Jquery :
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#textboxDiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#textboxDiv").append('<input type="text" name="textVal[]" value="" />');
}
}
});
});
</script>
Paste this code at the bottom of your page inside tag.
Your select box ID should be dropdown.
You need to have a div with an ID textboxDiv to place your generated textboxes.
I think you can do it easily with the help of JavaScript. Here is an example of it. Try it and modify it according to your requirement
<html>
<head>
<title>Select DIV to show</title>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<count;i++)
document.getElementById('myDiv'+i).style.display = 'none';
if(no>0)
document.getElementById('myDiv'+no).style.display = 'block';
}
</script>
</head>
<body>
<form name="myForm">
<select onChange="show(this)">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
<div id="myDiv1" style="display:none"> <form>
<select>
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form></div>
<div id="myDiv2" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
<div id="myDiv3" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
</body>
</html>
In this example just change the code in "myDiv1", "myDiv2", "myDiv3". I think it will hep you.:)