ボタンをクリックしたときにクリアフォームと非表示のdivを追加します

Question

私は以前にこの問題を抱えていましたが、人々は私の質問を誤解し続けています。私はもう一度やり直します。私は、JavaScriptをクリックするとajaxを使用してフォームを送信するブートストラップボタンを持っています。それはうまく動作しますが、フォームをクリアしてdivを非表示にするために何も追加できません。私は動作するコードを持っていますが、それは何らかの理由でフォームを2回送信します（含まれていませんが、あなたが望むことができます）？同じような質問を再投稿して申し訳ありませんが、人々は私に、単に機能しない同じコードを与え続けます。私はそれがボタンタイプであることとは関係があると思いますか？

$(document).ready(function() { 
    $('#btn-finish').on('click', function() { 

     // Add text 'loading...' right after clicking on the submit button. 
     $('.output_message').text('Processing...'); 

     var form = $(this); 
     $.ajax({ 
      url: form.attr('action'), 
      method: form.attr('method'), 
      data: form.serialize(), 
      success: function(result){ 
       if (result == 'success'){ 
        $('.output_message').text('Message Sent!'); 

       } else { 
        $('.output_message').text('Error Sending email!'); 
       } 
      } 
     }); 

     // Prevent default submission of the form after clicking on the submit button. 
     return false; 

    }); 
}); 

、ボタンは次のとおりです：

JSコードがある

<button name ='send' value="Send" type='submit' class='btn btn-primary'>Finish</button> 

Answer 1

ここで偽のAJAX要求を行う動作するコードです。これは、output_messageをProcessing ...に置き換え、Message Sent！一度完了します。ここで

$(document).ready(function() { 
 
    $('#btn-finish').on('click', function(event) { 
 

 
    event.preventDefault(); 
 
    // Add text 'loading...' right after clicking on the submit button. 
 
    $('.output_message').text('Processing...'); 
 

 
    var form = $(this); 
 

 
    setTimeout(function() { 
 
     console.log("fake ajax"); 
 
     $('.output_message').text('Message Sent!'); 
 
     // This will clear out form field values. 
 
     // resetForm($('#myform')); // by id, recommended 
 
     
 
     // This will hide your element 
 
     // $('#myform').hide(); 
 
    }, 5000); 
 

 
    }); 
 
}); 
 

 
function resetForm($form) { 
 
    $form.find('input:text, input:password, input:file, select, textarea').val(''); 
 
    $form.find('input:radio, input:checkbox') 
 
     .removeAttr('checked').removeAttr('selected'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id="btn-finish" name='send' value="Send" type='submit' class='btn btn-primary'>Finish</button> 
 
<div class="output_message"></div>

Answer 2

$（ドキュメント）.ready（関数（）{ $（ '＃のBTN-仕上げ' を動作するはずですw3schools.comからのリセットフォームスクリプトです）.on（ 'クリック'、関数（）{

// Add text 'loading...' right after clicking on the submit button. 
    $('.output_message').text('Processing...'); 

    var form = $(this); 
    $.ajax({ 
     url: form.attr('action'), 
     method: form.attr('method'), 
     data: form.serialize(), 
     success: function(result){ 
      if (result == 'success'){ 
      document.getElementById(form.attr('id')).reset(); 
      document.getElementById(form.attr('id')).style.display="none"; 
       $('.output_message').text('Message Sent!'); 

      } else { 
       $('.output_message').text('Error Sending email!'); 
      } 
     } 
    }); 

    // Prevent default submission of the form after clicking on the submit button. 
    return false; 

}); 

}）;

Answer 3

success: function(result){ 
       if (result == 'success'){ 
        $('.output_message').text('Message Sent!'); 
        //code to clear form and hide div comes here 
        $("#divid").hide(); 
       } else { 
        $('.output_message').text('Error Sending email!'); 
       } 
      }, 
complete: function(){ 
     //code to clear form and hide div comes here 
       $("#divid").hide(); 
     } 

上記のように、フォームを非表示にしてクリアしてみてください。 ajaxレスポンスが成功またはエラーの場合、デフォルトでは、上記のように完全な関数でコードを非表示にしたい場合に使用します。コメントを投稿してください。