I have read a few posts from on here and a few from w3schools, but i don't seem to be able to get my head around it.
essentially i have a page that needs to load a list of users that have logged into a system between 2 dates. their boss will log in and using his/her group id, dateto and datefrom, generate a drop down list that displays all the users that logged in during that period.
so far i have managed to be able to pass 1 selection value across to the php called by the ajax, but i can't manage to work out how to "post" multiple input selections.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Operator Portal</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.smallfont
{
font-size: 9px;
}
</style>
<script>
$(function() {
$('.datepicker').datepicker({ minDate: -21, maxDate: "+1D" });
});
</script>
</head>
<body>
<form action="results.php" method="post" target="_blank" class="ui-dialog-content" title="Owner Operator Web Portal">
<?php
include 'joomla-auth.php';
$name = JFactory::getUser() ->username;
?>
<input type="hidden" name="operatorID" value="<?php echo $name; ?>">
<p><strong>To show job details select the Car Number and Date Range below :</strong></p>
<table width="374" border="0" cellpadding="1">
<tr>
<td width="93"><strong>Car Number:</strong></td>
<td width="271"><select name="CarNumber" size="1" id="CarNumber" type="text">
</td>
</tr>
<tr>
<td><strong>Date From: </strong></td>
<td><input type="text" class="datepicker" name="DateFrom" id="DateFrom" />
<span class="smallfont">(date format: mm/dd/yyyy)</span></td>
</tr>
<tr>
<td><strong>Date To:</strong></td>
<td>
<input type="text" class="datepicker" name="DateTo" id="DateTo" />
<span class="smallfont">(date format: mm/dd/yyyy)</span></td>
</tr>
<tr>
<td height="50"> </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="4">
</table>
<input name="Submit" type="submit" class="ui-buttonset" id="Submit" formaction="results.php" formmethod="POST" title="Submit" value="Submit">
<input name="Reset" type="reset" class="ui-buttonset" id="Reset" title="Clear All" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
What i would like to be able to do is add another form element which is populated by the aforementioned ajax call
i think its meant to look something like this, but i cant manage to get it to work.
<html>
<head>
<script>
function showUser() {
// Retrieve values from the selects
var u = document.getElementByID('DateFrom').value;
var g = document.getElementByID('DateTo').value;
if (u=="" || g=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?u="+u+"&g="+g,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<div id="u">
<input type="text" class="datepicker" name="DateFrom" id="DateFrom" />
<span class="smallfont">(date format: mm/dd/yyyy)</span></td>
</div>
<div id="g">
<input type="text" class="datepicker" name="DateTo" id="DateTo" />
<span class="smallfont">(date format: mm/dd/yyyy)</span></td>
</div>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
Im obviously missing something very obvious. Now i realise that i havent put the hidden "input" into this second section of code, i was working on getting 2 inputs working before trying to get a 3rd.
thanks, Michael
looks like you mispelled some javascript
var u = document.getElementByID('DateFrom').value;
var g = document.getElementByID('DateTo').value;
the 'ID' should be a 'Id.' Lower case D. Try that - it should be the reason why nothing is getting passed
var u = document.getElementById('DateFrom').value;
var g = document.getElementById('DateTo').value;
Also check that the DOM element is built and exists when the function is called. Putting the JS at the end of the page helps.
Another Thing to help understand AJAX is that the controller (getuser.php) receives its variable via $_GET, as you have specified. So when clicking on your button, you call your AJAX function and shoot it your variables (u & g) and your controller handles them via $_GET.
Your controller spits out an output and that is what received back on your original page. So you can simply echo a string with as many variable as you like in a format you can parse correctly. for example:
you echo an output from getuser.php:
echo $var1.'|'.$var2.'|'.$var3;
Then your original page can process further or w.e you need:
data = xmlhttp.responseText.split ( "|" );
var1 = data[0];
So you dont need any traditional HTML form when using AJAX. Simply code your variables with your Javascript function. For example:
<div id="fancyButton" onclick="sampleAJAXfunction(var1,var2,var3)"></div>
I hope this helps with your original question.