使用ajax在一个表单上的多提交按钮

时间:2014-01-08 15:23:38

标签: php ajax forms

我的表单有5个提交按钮,如

<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 />

对此的ajax处理是:

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;
        }
    }
}

test.php是:
    $Id = strip_tags($_POST['Id']); $Value = strip_tags($_POST['Value']); echo "{$Id}, {$Value}";

问题是,当单击表单中的任何值时,只会显示第一个值。如何让它识别所有不同的提交值?

1 个答案:

答案 0 :(得分:0)

发布时,只会更改同名的最后一个值。 请参阅此帖子on using multiple name elements

您正在寻找的是where you have multiple button names

如果你需要循环遍历它们,给它们提供可预测的名称,然后遍历名称,如:

Submit1
Submit2
Submit3

编辑:

您正在通过getElementByID('Value')

获取元素

这将获得具有ID值的第一个元素。

这可能是一个很好的方式here