Question

我有一组动态创建的表格。

<form action='test.php' method='post' name='addtocart' id='form1'>
<input class="qty" type="text" size="3" name="quantity" value="1">
<input class="btnStandard" type="button" name="submit" value="Add to Cart">
</form>
<form action='test.php' method='post' name='addtocart' id='form2'>
<input class="qty" type="text" size="3" name="quantity" value="1">
<input class="btnStandard" type="button" name="submit" value="Add to Cart">
</form>

通过单击类为btnStandard的按钮，相应的表单将被提交。我的jQuery代码

$(document).ready(function(){
    $(document).on('click', '.btnStandard', function(event){
            var formId = $(this).parent("form[name='addtocart']").attr('id');
            alert(formId);  //gives the form id
            $('form#'+formId).submit(); 
    });
});

但是表单未提交。

编辑

我错过了：我按照评论中的建议编辑了问题。表单仍未提交，但警报正在起作用。

Answer 1

这里有两个主要问题。首先，如果form元素是动态创建的，则需要使用委托的事件处理程序。

第二，要提交表单，它必须具有一个submit按钮，因此请更改type元素上的input type="button"。

$(document).ready(function() {
  $(document).on('click', '.btnStandard', function(event) {
    var formId = $(this).parent("form[name='addtocart']").attr('id');
    alert(formId); //gives the form id
    $('form#' + formId).submit();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action='test.php' method='post' name='addtocart' id='form1'>
  <input class="qty" type="text" size="3" name="quantity" value="1">
  <input class="btnStandard" type="submit" name="submit" value="Add to Cart">
</form>

<form action='test.php' method='post' name='addtocart' id='form2'>
  <input class="qty" type="text" size="3" name="quantity" value="1">
  <input class="btnStandard" type="submit" name="submit" value="Add to Cart">
</form>

但是，这样说来获取DOM元素以从中获取id并通过id再次选择它是完全多余的。只需使用closest()即可获取表单，然后从其中删除name和id：

$(document).ready(function() {
  $(document).on('click', '.btnStandard', function(event) {
    $(this).closest('form').submit();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="test.php" method="post">
  <input class="qty" type="text" size="3" name="quantity" value="1">
  <input class="btnStandard" type="submit" name="submit" value="Add to Cart">
</form>

<form action="test.php" method="post">
  <input class="qty" type="text" size="3" name="quantity" value="1">
  <input class="btnStandard" type="submit" name="submit" value="Add to Cart">
</form>

动态创建的表单未提交

1 个答案: