-1

我在同一页面上有一个包含两个表单的页面。这两种形式是基于视口显示的（响应式设计/媒体查询 css）。

在页面上，我使用bootstrapvalidator来验证字段，并使用 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();，然后我认为问题是由提交按钮的提交名称/ID 上的名称冲突引起的。但现在我很确定这与同一页面上存在两个表单有关 - 因为我现在设法解决整个问题的唯一方法是完全删除其中一个表单，这真的不是解决方案！

我的表单看起来像这样，具有不同的表单 id (html5form/html5formmob) 和输入提交 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 禁用/启用整个表单？..这可能是一个解决方案，还是您有其他建议？

4

2 回答 2

0

尝试以下方法：

$('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)) );
于 2015-01-08T21:21:52.653 回答
0

尝试将您的 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();
                    });
                }
            }); 
        });
    }
});

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

于 2014-12-07T22:08:28.253 回答