Javascript Ajax表单-从同一页面上的所有表单提交

我有一页，同一页上有两张表格。这两个表单基于视口显示（响应式设计/媒体查询css）

在我用来验证字段的页面上，我使用Ajax来提交表单，而无需重新加载浏览器。由于bootstrapvalidator，Ajax代码如下所示-一个针对所有表单的代码：

  $('form').on('success.form.bv', function(e) {
    var thisForm = $(this);

    //Prevent the default form action
    e.preventDefault();

    //Hide the form
    $(this).fadeOut(function() {
      //Display the "loading" message
      $(".loading").fadeIn(function() {
        //Post the form to the send script
        $.ajax({
          type: 'POST',
          url: thisForm.attr("action"),
          data: thisForm.serialize(),
          //Wait for a successful response
          success: function(data) {
            //Hide the "loading" message
            $(".loading").fadeOut(function() {
              //Display the "success" message
              $(".success").text(data).fadeIn();
            });
          }
        }); 
      });
    });

这段代码的问题似乎在于，代码将发送两封邮件，一封用于可见表单，另一封用于隐藏的移动/选项卡表单-两种表单都会显示成功消息（当我调整浏览器大小以同时针对桌面和移动/平板电脑时，我可以看到两种表单的成功消息）。首先我认为是因为

e.preventDefault（）有问题

然后我认为问题是由submit按钮的submit name/id上的错误引起的。但现在我很确定这与同一页面上两个表单的存在有关——因为我现在唯一能解决整个问题的方法就是完全删除其中一个表单，而这并不是一个解决方案

我的表单看起来像这样，具有不同的表单id（html5form/html5formmob）和输入提交id（mob/desk）：

名称
邮寄
味精
正在发送消息。。。

---

所以我的问题是，有没有一种方法可以使用CSS或JS禁用/启用整个表单。。这是一个解决方案，还是你有其他建议

尝试将您的JS部件更改为：

$('form').on('success.form.bv', function(e) {
    var thisForm = $(this), parent = thisForm.parent();

    //Prevent the default form action
    e.preventDefault();

    if (thisForm.is(':visible')) {
        //Hide the form
        thisForm.fadeOut(function() {
        //Display the "loading" message
        $(".loading", parent).fadeIn(function() {
            //Post the form to the send script
            $.ajax({
                type: 'POST',
                url: thisForm.attr("action"),
                data: thisForm.serialize(),
                //Wait for a successful response
                success: function(data) {
                    //Hide the "loading" message
                    $(".loading", parent).fadeOut(function() {
                        //Display the "success" message
                        $(".success", parent).text(data).fadeIn();
                    });
                }
            }); 
        });
    }
});

---

将动态工作，因此即使您通过调整浏览器大小来切换表单。

请尝试以下方法：

$('form').on('success.form.bv', function(e) {
var thisForm = $(this);

//Prevent the default form action
e.preventDefault();

if (getComputedStyle(thisForm[0], null).display != "none" )
{
    //Hide the form
    $(this).fadeOut(function() {
      //Display the "loading" message
      $(".loading").fadeIn(function() {
        //Post the form to the send script
        $.ajax({
          type: 'POST',
          url: thisForm.attr("action"),
          data: thisForm.serialize(),
          //Wait for a successful response
          success: function(data) {
            //Hide the "loading" message
            $(".loading").fadeOut(function() {
              //Display the "success" message
              $(".success").text(data).fadeIn();
            });
          }
        }); 
      });
    });
}
});

但您也可以自行验证每个表单：

  $('#html5Form')
    .formValidation({
        ... options ...
    })
    .on('success.form.fv', function(e) { ... ajax call ...} );

甚至更好。将ajax调用包装到函数中

function callAjax(form)
{
      form.fadeOut(function() {
      //Display the "loading" message
      $(".loading").fadeIn(function() {
        //Post the form to the send script
        $.ajax({
          type: 'POST',
          url: form.attr("action"),
          data: form.serialize(),
          //Wait for a successful response
          success: function(data) {
            //Hide the "loading" message
            $(".loading").fadeOut(function() {
              //Display the "success" message
              $(".success").text(data).fadeIn();
            });
          }
        }); 
      });
    });
}


  $('#html5Form')
    .formValidation({
        ... options ...
    })
    .on('success.form.fv', callAjax.bind(null, $(this)) );

  $('#html5formmob')
    .formValidation({
        ... options ...
    })
    .on('success.form.fv', callAjax.bind(null, $(this)) );

---

谢谢你的回答！我试过你的建议。。现在发生的事情就像我要删除

e.preventDefault（）一样-默认表单操作正在进行，浏览器在提交时重新加载。我尝试了此新代码，但不幸的是-结果仍然相同！然后，您的第二个表单没有真正隐藏，或者有另一个可见表单正在发布。“：当整个表单元素的css为
display:none时，“visible”的计算结果为FALSE（我们希望移动表单使用该值）或<代码>可见性：隐藏<代码>显示：无
是首选的另一个建议，您可能希望更改事物消失的方式。现在，当表单发布时，表单立即消失。但是，如果请求无法完成或者服务器出现错误怎么办？我建议在触发成功事件时淡出表单。感谢您没有放弃我；）我使用的是
display:none
，我试图改变事物消失的顺序，但没有得到想要的结果。请注意，我在
mail.php
文件以及客户端bootstarpvalidator中有一个服务器端php验证-php文件中的错误将在成功消息中显示错误，并且不会提交电子邮件！在提交表单之前，是否有其他方法针对类中的
显示：block
？感谢您的回答！这也不行。。。如何使用JS根据屏幕大小删除/禁用表单操作
if（screen.width>801）{$（“html5FormMob”）.removeAttr（“动作”）；}else{$（（“html5Form”）.removeAttr（“动作”）；}
@Sepi这是个好主意，但你不想这么做。如果有人将你的网站加载到桌面上的小屏幕上，它会使用错误的表单。您实现了哪种解决方案？这是您建议的结果：解决方案1）Ajax工作-仍然有两封邮件。解决方案2）Ajax不工作-将页面重新加载到mail.php。解决方案3）Ajax不起作用-将页面重新加载到mail.php。我在提交桌面表单后检查DOM时意识到，移动表单也显示load和success消息，这会不会触发mail.php两次触发？
function callAjax(form)
{
      form.fadeOut(function() {
      //Display the "loading" message
      $(".loading").fadeIn(function() {
        //Post the form to the send script
        $.ajax({
          type: 'POST',
          url: form.attr("action"),
          data: form.serialize(),
          //Wait for a successful response
          success: function(data) {
            //Hide the "loading" message
            $(".loading").fadeOut(function() {
              //Display the "success" message
              $(".success").text(data).fadeIn();
            });
          }
        }); 
      });
    });
}


  $('#html5Form')
    .formValidation({
        ... options ...
    })
    .on('success.form.fv', callAjax.bind(null, $(this)) );

  $('#html5formmob')
    .formValidation({
        ... options ...
    })
    .on('success.form.fv', callAjax.bind(null, $(this)) );