Форма Ajax - Отправка из всех форм на одной странице

Question

У меня есть страница с двумя формами на одной странице. Две формы отображаются в зависимости от области просмотра (адаптивный дизайн / медиа запросы css).

На странице я использую http://bootstrapvalidator.com/ для проверки полей и Ajax для отправки форм без перезагрузки браузера. Из-за начальной загрузки 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(); и тогда я подумал, что проблема была вызвана конфликтами имен в имени / идентификаторе отправки кнопки отправки. Но теперь я почти уверен, что это связано с существованием двух форм на одной странице - потому что единственный способ, которым мне удается исправить всю эту проблему прямо сейчас, - это полностью удалить одну из форм, и это действительно не решение!

Мои формы выглядят так с другим идентификатором формы (html5form / html5formmob) и входным идентификатором отправки (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? ... и это может быть решением, или у вас есть другие предложения?

Answer 1

Попробуйте изменить свою часть 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();
                    });
                }
            }); 
        });
    }
});

Будет работать динамически, поэтому даже при переключении форм путем изменения размера вашего браузера.

Answer 2

Попробуйте следующий подход:

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