php - 如何分离php生成的按钮

Question

我正在用 php 生成按钮表

echo ' <td">
<form action="test.php" method="POST">
<input type="hidden" id="node" name="node" value="'.$fnode->{'name'}.'">
<input type="hidden" id="service" name="service" value="'.$flavor.'">
<input type="hidden" id="running" name="running" value="false">
<input type="submit" value="OFF" class="button">
</form>
</td>';

我想发送值而不通过 jquery ajax 重新加载，我正在使用此代码：

$(".button").click(function() { $('.error').hide();

    var dataString = 'node='+ document.getElementById('node').value + '&service=' + document.getElementById('service').value + '&running=' + document.getElementById('running').value;

    $.ajax({
        type: "POST",
        url: "test.php",
        data: dataString,
        success: function() {
            alert ("Success");
        }
    });
    return false;
});

代码工作至今——它总是从第一个表单发送数据。区分所有按钮的最佳方法是什么。我可以在表单中使用计数器，但我将如何准确地编写 js“ifs”。有没有更优雅的方法来做到这一点。表格的数量是动态的。

Answer 1

您可以很容易地抓住单击按钮的父表单，但您可能还希望在表单上拥有一个唯一的 ID 用于其他事情。此外，您需要删除输入上的 id 或使其唯一。

echo ' <td">
<form action="test.php" method="POST" id="form_node_' . $fnode->{'name'} . '>
<input type="hidden" name="node" value="'.$fnode->{'name'}.'">
<input type="hidden" name="service" value="'.$flavor.'">
<input type="hidden" name="running" value="false">
<input type="submit" value="OFF" class="button">
</form>
</td>';


$(".button").click(function(e) {
    e.preventDefault(); 
    $('.error').hide();
    var $form = $(this).closest('form'), // the closest parent form
        dataString = $form.closest('form').serialize(); // serialize the values instead of manually encoding
    $.ajax({
        type: "POST",
        url: "test.php",
        data: dataString,
        success: function() {
            alert ("Success submitting form ID " + $form.attr('id'));
            // you can now modify the form you submitted
        }
    });
    return false;
});

Answer 2

最好的方法是对表单元素使用唯一 ID。另一种方法是将类设置为具有相同名称的多个元素。

但是，以下方法更可取：

$("form").on("submit", function() {
    $.ajax({
        type: "POST",
        url: "test.php",
        data: $(this).serialize(),
        success: function() {
            alert ("Success");
        }
    });
    return false;
});

（但无论如何不要忘记id从表单元素中删除重复的属性。）

Answer 3

你可以给每个提交按钮一个 id：

<input id="button-1" type="submit" value="OFF" class="button">

然后在单击特定按钮时触发事件：

$("#button-1").click(function() { ... });