Question

我有一个表单，我想使用jQuery提交标准方式（而不是Ajax）。

这是我的代码：

<form id="myform" action="post.php" method="post">
  <input type='text' value='12' name="student_id"/>
  <button data-action="delete" class="form-button"><i class="icon-ok"></i>
  </button>
  <button data-action="approve" class="form-button"><i class="icon-ok"></i>
  </button>
</form>

$(document).ready(function(){

    $('.form-button').click(function(e){

    //which button clicked 
    var button_action = $(this).attr(" data-action");

    //how do I append button_action to post data??

    //submit form
    $("#myform").submit();

    });

});

如何添加单击按钮的值“data-action”到post参数，以便我在PHP文件中使用它，基本知道点击了哪个按钮？

Answer 1

一种简单的方法是使用隐藏的输入

<form id="myform" action="post.php" method="post">
    <!-- use this input to store the clicked button value -->
    <input type='hidden' name="action" />
    <input type='text' value='12' name="student_id" />
    <button data-action="delete" class="form-button"><i class="icon-ok"></i></button>
    <button data-action="approve" class="form-button"><i class="icon-ok"></i></button>
</form>

然后

$(document).ready(function () {
    $('.form-button').click(function (e) {
        var $form = $("#myform");
        $form.find('input[name="action"]').val($(this).data("action"))

        $form.submit();
    });
});

Answer 2

提交按钮自然地执行此操作，无需编写脚本。如果它具有名称和值，则提交按钮将向表单提交该名称=值对，如果它是单击的那个。

只需将type="submit" name="action"添加到<button>元素即可。并将data-action更改为value，或使value与data-action重复。

Answer 3

使用hidden字段

<form id="myform" action="post.php" method="post">
  <input type='text' value='12' name="student_id"/>
  <input type='hidden' name="action"/>
  <button data-action="delete" class="form-button"><i class="icon-ok"></i>
  </button>
  <button data-action="approve" class="form-button"><i class="icon-ok"></i>
  </button>
</form>

这是你的Jquery，

$(document).ready(function(){

$('.form-button').click(function(e){

//which button clicked 
var button_action = $(this).attr(" data-action");

$('input[name="action"]').val(button_action);

//submit form
$("#myform").submit();

});

});

jQuery表单提交 - 如何附加数据？

3 个答案: