javascript - Ajax多次提交表单

标签 javascript jquery ajax

我使用此代码来处理 Ajax 发送的数据。我正在使用 Summernote 编辑器。我的问题是,当我提交时缺少任何字段时,我的表单显示“必填警报”,然后当我填写所有字段并按提交按钮时,表单会发送 Ajax 请求两次。直到每次我错过必填字段时都会发生这种情况。

  <script type="text/javascript">
    jQuery(document).ready(function (e) {
        jQuery('#btnSubmit').click(function(){ //btnSubmit is submit button id

            jQuery("#my_form").submit(function(event){
                event.preventDefault(); //prevent default action
                var post_url = jQuery(this).attr("action"); //get form action url
                var request_method = jQuery(this).attr("method"); //get form GET/POST method
                var form_data = new FormData(this); //Creates new FormData object
                jQuery.ajax({
                     url: "/demo/wp-admin/admin-ajax.php?action=theme_submit",  

                    type: request_method,
                    data : form_data,
                    contentType: false,
                    cache: false,
                    processData:false,
                    success:function(data){  
                    alert ('Data Successfully Inserted');
                    //location.reload();
                    //top.location.href="admin.php?page=data_list";
                    },

                })

            });
        })
    }); 
    </script>

最佳答案

您可以从点击中提取提交。编写一个用于提交表单的函数,并在单击#btnSubmit 时调用它。下面是可以帮助您的代码:

jQuery('#btnSubmit').on('click', function(event) {
  event.preventDefault(); //prevent default action
  submitForm();
})

function submitForm() {
  var post_url = jQuery("#my_form").attr("action"); //get form action url
  var request_method = jQuery("#my_form").attr("method"); //get form GET/POST method
  var form = $('form').get(0);
  var form_data = new FormData(form) //Creates new FormData object
  jQuery.ajax({
    url: "/demo/wp-admin/admin-ajax.php?action=theme_submit",

    type: request_method,
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
      alert('Data Successfully Inserted');
      //location.reload();
      //top.location.href="admin.php?page=data_list";
    },

  })

}

关于javascript - Ajax多次提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45052933/

相关文章:

javascript - 如何识别变量的对象类型?

javascript - 如何按自定义标准对 javascript 数组进行排序?不按字母或数字排列

javascript - 将一个数组推到另一个数组的末尾

javascript - jQuery如何实现toggleClick功能

javascript - Select2 从多个中获取删除的值

javascript - ajax调用成功后如何执行JS函数?

php - 长轮询导致数据库错误

javascript - 循环数组中的对象,显示 JSON 数据

javascript - 为什么在 &lt;script&gt; 标签之后需要 $(document).ready?

javascript - 你如何记录由 jQuery 中的元素触发的所有事件?