javascript - 使用附加到同一 ID 的 HTML 按钮发送不同的值

Question

我正在制作小型 PHP 应用程序来检索一些分类记录。因为我需要在不重新加载页面的情况下动态检索 php 记录，所以我使用 JQuery 将 XMLHTTP 值发送到 PHP 脚本。在这个应用程序中，我有六个 HTML 按钮用于六个类别。和一个用于选择数字的选择框。当用户单击其中一个按钮时，它应该将按钮值和选择框值发送到另一个 PHP 脚本。因为我使用 jquery 来捕获按钮值，所以我必须将所有按钮 ID 设置为相同。所有按钮都有点击事件来触发 java 脚本功能。我的问题是，因为这六个按钮有六个不同的值，我如何通过 XMLHTTP 方法发送这些值？

这是我的HTML代码

<select id="number">
    <option value="30">30</option>
    <option value="60">60</option>
    <option value="90">90</option>
</select>
<button type="button" value="test1" id="btnval" onclick="loadXMLDoc()">test1</button>
<button type="button" value="test2" id="btnval" onclick="loadXMLDoc()">test2</button>
<button type="button" value="test3" id="btnval" onclick="loadXMLDoc()">test3</button>
<button type="button" value="test4" id="btnval" onclick="loadXMLDoc()">test4</button>
<button type="button" value="test5" id="btnval" onclick="loadXMLDoc()">test5</button>
<button type="button" value="test6" id="btnval" onclick="loadXMLDoc()">test6</button>
<button type="button" onclick="loadXMLDoc()">Search</button>

因为所有这六个按钮都具有相同的 ID Jquery 无法正确识别值

这是我的 jquery 代码

    function loadXMLDoc() {

        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("loadingDiv").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "test2.php?submit=" + btnval.value + "&datebetween=" + number.value, true);
        xmlhttp.send();
    }

如何将选择框值和六个不同的按钮值发送到 php 脚本？

这是我的前端界面示例 front end sample image

Answer 1

我不明白你为什么要发送“六个不同的按钮值到 php 脚本”:我想你的 php 代码只需要知道按下了六个按钮中的哪一个。

如果是这种情况，你不能简单地为你的函数添加一个参数吗

function loadXMLDoc(buttonPressed)

然后用不同的参数值修改每个按钮

<button type="button" value="test1" onclick="loadXMLDoc(1)">test1</button>
<button type="button" value="test2" onclick="loadXMLDoc(2)">test2</button>

等等？