jqueryajax表单提交请求第一次点击不起作用可能是什么原因

jquery ajax form submit request with first click is not working what is the possible cause

本文关键字：是什么 不起作用 表单提交 请求 第一次 jqueryajax      更新时间：2023-09-26

第一次点击时它没有得到响应，但第二次点击时，它给出了所需的效果

我正在使用多种形式的

<form action="" method="" id="formproduct">
  <input
    type="hidden"
    name="id"
    class="productid"
    value="<?php echo   $row['Product_id'];?>"
  />
  <button name="submit" class="btn">Add To Cart</button>
</form>
<script>
  $(document).ready(function(){
      jQuery("#formproduct").submit(function(event){
          event.preventDefault();
          $("form").on("click", "button[name=submit]", function(){
              var form = $(this).closest("form"); // find the form to relate to
              var formData = { product: $(".productid", form).val() };
              jQuery.ajax({
                  type: "POST",
                  url: "server-cart.php",///contain the url of ajax
                  data:formData,
                  dataType:"json",
                  success : function (response){}
             });
          }
      }
  }
</script>

jQuery("#formproduct").submit(function(event){
    ...
    $("form").on("click", "button[name=submit]", function(){});
    ...
});

这是绑定提交处理程序。当表单提交时，该逻辑将点击处理程序绑定到表单。因此，之后点击表单提交按钮将执行该逻辑。如果您希望第一次发生点击逻辑，则必须将其移动到提交处理程序之外。

只需去掉点击处理程序，直接在提交处理程序中执行ajax

jQuery("#formproduct").submit(function(event) {
    event.preventDefault();
    var form = $(this); // "this" is the form
    var formData = {
        product: $(".productid", form).val()
    };
    jQuery.ajax({
        type: "POST",
        url: "server-cart.php", ///contain the url of ajax 
        data: formData,
        dataType: "json",
        success: function(response) {}
    });
});

好处是用户也可以使用键盘提交

相关文章：