javascript - Ajax:提交带有表单名称的表单

Question

我有以下表格

<form autocomplete="off" id="settleUp" name="settleUp" method="post" role="form">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
        <div class="form-group">
             <div class="input-group">
                  <h4>Gautam Sawala</h4>
             </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
          <div class="form-group">
               <div class="input-group">
                    <span class="input-group-addon">
                          <i class="fa fa-eur"></i>
                    </span>
                    <input onChange="checkInput(this);" step="0.01" type="number" class="form-control" id="amount" name="amount" value="0.00" placeholder="0.00" min="0.00" required>
                    <input id="payeeId" name="payeeId" value="3" hidden required>
               </div>
          </div>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
         <div class="form-group">
              <div class="input-group">
                  <input type="submit" class="btn btn-success" value="Pay Back">
              </div>
   </div>
</div>

我想提交这个表单作为ajax表单提交，

$("#settleUp").submit(function(e){
        alert('here');
        $.ajax({
            type:"PUT",
            url: "/api/v1/settlements",
            data: $(this).serialize()+'&groupId='+'<?php echo $_GET['group_id'] ?>'+'&userId='+'<?php echo $_SESSION['userId'] ?>'+'&token='+'<?php echo $_SESSION['token'] ?>',
            dataType: "json",
            success: function(response){
                refreshExpenseListing();
                $('#settleUpModal').modal('hide');
                },
            error: function(data) {
                alert("failure");
              }
        });

        e.preventDefault();
    });

我可以使用表单 $("#settleUp").submit(function(e)

的 id 提交表单

但我有多个上述表单，我想使用 name 而不是 id 提交表单。

AJAX 有办法做到这一点吗？

像这样的， $("form[formname]").submit(函数(e)?

我试过了 $("form.settleUp").submit(function(e) 但这不起作用!

Answer 1

是的，您可以使用 Attribute Equals Selector 来做到这一点:

$("form[name='settleUp']").submit(function(e){
    //Your code here
}

---

解释

第一次尝试:

$("form[formname]").submit(function(e)

Your first attempt will not work since you give just the value formname without specifying the concerned attribute.

第二次尝试:

$("form[formname]").submit(function(e)

It will not work it your form has a class name equal settleUp since . is a class selector.

---

要处理通过ajax 动态添加到文档中的表单，您必须使用事件委托(delegate) on() :

$('body').on('submit', "form[name='settleUp']", function(e)

希望这对您有所帮助。