我有两种形式在同一页上的页。基于视窗（响应式设计/媒体查询CSS）显示两种形式。

I have a page with two forms on the same page. The two forms is displayed based on viewport (responsive design/media queries css).

在网页上我使用 bootstrapvalidator 为了验证，以提交表单没有田地和阿贾克斯浏览器重新加载。由于bootstrapvalidator中，阿贾克斯code是这样的 - 一个code表示针对各种形式的：

On the page I am using bootstrapvalidator in order to validate the fields, and Ajax in order to submit the forms without browser reload. Because of the bootstrapvalidator, the Ajax code looks like this - a code that targets ALL forms:

  $('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();
            });
          }
        }); 
      });
    });

本code中的问题，因为它似乎是一个事实，即code将发送两个邮件，一个是可见的形式，和一个用于隐藏移动/标签形式 - 成功味精会实际显示两种形式（当我调整浏览器同时针对台式机和暴徒/片，我可以看到成功味精两种形式）。首先，我想到的是是因为一些错误的电子preventDefault（）; 然后我想这个问题是通过的名称冲突的提交按​​钮的提交名称/ ID。但我现在pretty的肯定它，是因为有两种形式在同一页面上的存在 - 因为只有这样，我管理，现在来解决这整个问题是彻底清除的一种形式，那就是真的没办法了！

The problem with this code, as it seems, is the fact that the code will send two mails, one for the visible form, and one for the hidden mobile/tab form - the success msg will actually be displayed for both forms (when I resize the browser to target both desktop and mob/tablet, I can see the success msg for both forms). First I thought is was because of something wrong with the e.preventDefault(); and then I thought the problem was caused by name conflicts on the submit name/id of the submit button. But now I am pretty sure it has to do with the existence of the two forms on the same page - because the only way I manage to fix this whole problem right now is by completely remove one of the forms, and that's really not a solution!

我的形式看起来像这样用不同的形式的ID（html5form / html5formmob）和输入提交ID（暴徒/台）：

My forms look like this with different form id (html5form/html5formmob) and input submit id (mob/desk):

    <form id="html5Form" method="post" action='mail/mail.php'
          class="form-horizontal"
          data-bv-message="This value is not valid"
          data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
          data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
          data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">    

              <div class="form-group">
                      <label>Name</label>
                      <input class="form-control" type="text" name="name" id="name"
                             data-bv-message="The username is not valid"
                             required data-bv-notempty-message="Please give a name"/>
              </div>

              <div class="form-group">
                  <label>Mail</label>
                      <input class="form-control" name="email" id="email" type="email" required data-bv-emailaddress-message="No valid email"  />
              </div>

              <div class="form-group">
                <label>Msg</label>
                <textarea class="form-control" name="message" id="message" rows="7" required 
                data-bv-notempty-message="No empty msg"></textarea>
              </div>  

                <input type="submit" id="mob" value="Send"/>
            </form>
<div class="loading">
        Sending msg...
  </div>
  <div class="success">
  </div>

所以我的问题，有没有一种方法来禁用/启用整个窗体采用CSS或JS？ ..和可这是一个解决方案，或者你有其他的建议？

So my question, is there a way to disable/enable the entire form using CSS or JS? ..and could this be a solution, or do you have other suggestions?

推荐答案

请尝试以下方法：

$('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();
            });
          }
        }); 
      });
    });
}
});

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

But you can also validate each form by itself:

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

甚至更好。包装在一个函数Ajax调用

Or even better. wrap the ajax call in a function

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)) );