Multi-submit buttons on one form with ajax - php

Question

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?

Answer 1

When posting, only the last value of the same name will be changed.
See this post on using multiple name elements
What you are looking for is something like this where you have multiple button names.
If you need to loop through them, give them predictable names then loop through the names like:
Submit1
Submit2
Submit3
EDIT:
You are getting the element by getElementByID('Value')
This will get the first element with the ID value.
This may be a good way to go here