javascript - Ajax フォーム - 同じページのすべてのフォームから送信する

Question

同じページに 2 つのフォームがあるページがあります。2 つのフォームは、ビューポート (レスポンシブ デザイン/メディア クエリ 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();
            });
          }
        }); 
      });
    });

このコードの問題は、コードが 2 つのメールを送信するという事実にあるようです。1 つは表示されているフォーム用で、もう 1 つは非表示のモバイル/タブ フォーム用です。成功メッセージは実際には両方のフォームに表示されます (デスクトップとモブ/タブレットの両方を対象とするようにブラウザーのサイズを変更すると、両方のフォームの成功メッセージが表示されます)。最初に、送信ボタンの送信名/IDの名前の競合e.preventDefault();が問題の原因であると考えました。しかし、今では、同じページに 2 つのフォームが存在することに関係していると確信しています。なぜなら、この問題全体を解決する唯一の方法は、フォームの 1 つを完全に削除することであり、それは実際には解決策ではないからです。 !

私のフォームは、フォーム 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 を使用してフォーム全体を無効/有効にする方法はありますか? ..これが解決策になる可能性がありますか、それとも他の提案はありますか?