I have many input values from a form, and I would like to push them to PHP code using ajax code. Here's an example of what i'm trying to do. I have test1 and test2 that i want to keep track when user press search button.
Right now it only get the value of test1 "getResults(this.test1.value)" I would like to know how to get the test2 value using the same method.
<form name="input" action="" method="" onsubmit="getResults(this.test1.value); return false;">
<input type="text" name="test1">
<select id="test2" name="test2">
<option value="">Make a choice ...</option>
<option value="c1">choice 1</option>
<option value="c2">choice 2</option>
<option value="c3">choice 3</option>
</select>
<input type="submit" value="Search">
</form>
<div id="here"><b></b></div>
The getresults method, right now it only support one string, how can I add more arguments ?
function getResults(str)
{
if (str=="")
{
document.getElementById("here").innerHTML="";
return;
}
else (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("here").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","info.php?q="+str,true);
xmlhttp.send();
}
and finaly and more importantly how can I retreive values from info.php ? Thanks a lot
<?php
$test1 = $_GET['test1'];
echo "$test1";
$test2 = $_POST["test2"];
echo "$test2";
?>
You don't need to pass argument to the function. We can grab the form fields value there.
<html>
<head>
<script type="text/javascript">
function getResults()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("here").innerHTML=xmlhttp.responseText;
}
}
var data = "test1="+document.getElementById("test1").value+"&test2="+document.getElementById("test2").value;
xmlhttp.open("POST","info.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
</script>
</head>
<body>
<form name="input" action="" method="" onsubmit="getResults(); return false;">
<input type="text" name="test1" id="test1">
<select id="test2" name="test2">
<option value="">Make a choice ...</option>
<option value="c1">choice 1</option>
<option value="c2">choice 2</option>
<option value="c3">choice 3</option>
</select>
<input type="submit" value="Search">
</form>
<div id="here"><b></b></div>
</body>
</html>
Than in your info.php file do this to grab the variables sent via Ajax,
<?php
$test1 = $_POST["test1"];
$test2 = $_POST["test2"];
echo "Test1: ".$test1."<br/>Test2: ".$test2."";
?>
The reason it doesn't pull both values is because 1) you need to add a method to your form. You can either do post or get, not both.2) In your php you define test 1 as from the get array and variable 2 as from the post array. If you make $test2 from the get array it should work.