I have a form which has 5 submit buttons like
<form action="pages/test.php" method="post" name="form1 "onsubmit="ajaxrequest('pages/test.php', 'resp'); return false;">
<input type="hidden" name="Id" id ="Id" value=<?php echo "{$Id}"; ?> />
<input type="submit" name="Value" value="0.01" />
<input type="submit" name="Value" value="0.02" />
<input type="submit" name="Value" value="0.03" />
<input type="submit" name="Value" value="0.04" />
<input type="submit" name="Value" value="0.05" />
</form>
<div id="resp">Here will be displayed the server response.</div><br />
The ajax processing for this is:
function get_XmlHttp() {
var xmlHttp = null;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// sends data to a php file, via POST, and displays the received answer
function ajaxrequest(php_file, tagID) {
var request = get_XmlHttp();
var Id = document.getElementById('Id').value;
var Value = document.getElementById('Value').value;
// create pairs index=value with data that must be sent to server
var the_data = 'Id='+Id+'&Value='+Value;
request.open("POST", php_file, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(the_data);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(tagID).innerHTML = request.responseText;
}
}
}
The test.php is:
$Id = strip_tags($_POST['Id']); $Value = strip_tags($_POST['Value']); echo "{$Id}, {$Value}";
The problem is that when clicking on any value in the form only the first value is ever displayed. How do I get it to recognise all the different submit values?