2017-03-25 15 views
0

を提出した後、私は停止Laddaボタンスピンに成功Ajaxフォーム

<html> 
    <head> 
     <title>jQuery post form data using .post() method by codeofaninja.com</title> 

    </head> 
<body> 

<h1>jQuery post form data using .post() method</h1> 
<div>Fill out and submit the form below to get response.</div> 

<!-- our form --> 
<form id='userForm'> 
    <div><input type='text' name='firstname' placeholder='Firstname' /></div> 
    <div><input type='text' name='lastname' placeholder='Lastname' /></div> 
    <div><input type='text' name='email' placeholder='Email' /></div> 
    <div><input type='submit' value='Submit' /></div> 
</form> 

<!-- where the response will be displayed --> 
<div id='response'></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> 
<script> 
$(document).ready(function(){ 
    $('#userForm').submit(function(){ 

     // show that something is loading 
     $('#response').html("<b>Loading response...</b>"); 

     /* 
     * 'post_receiver.php' - where you will pass the form data 
     * $(this).serialize() - to easily read form data 
     * function(data){... - data contains the response from post_receiver.php 
     */ 
     $.post('post_receiver.php', $(this).serialize(), function(data){ 

      // show the response 
      $('#response').html(data); 

     }).fail(function() { 

      // just in case posting your form failed 
      alert("Posting failed."); 

     }); 

     // to prevent refreshing the whole page page 
     return false; 

    }); 
}); 
</script> 

</body> 
</html> 

このコードには問題はありませんがpost_receiver.phpするフォームデータを提出するために、このコードを持っています。しかし、私は送信ボタン(この1つ:https://msurguy.github.io/ladda-bootstrap/)のスピン効果を表示するためにLaddaボタンを使用していますが、結果が返された直後にこの効果が止まるようにしたいと思います。

私はこのウェブサイトで同様の質問を検索して見つけましたが、JavascriptとAjaxについてほとんど理解していない初心者でも、私はまだ問題を解決できませんでした。

誰かが私がもっと挿入する必要があるコードを教えてください。すべてのあなたの助けを感謝!

+0

'$。post 'の最後に' .always() 'を追加し、' stop() 'で回転を止めます。リンクしたページには、下部にサンプルコードがあります。 – user2896976

+0

この回答を見るhttp://stackoverflow.com/a/40513161/5019802 –

答えて

0

$('#response').html(data);の後におそらくl.stop()を追加するべきですが、それはあなたがLaddaをどのように初期化したかによって異なります。

うまくいかない場合は、そのコードも投稿してください。

+0

非常に最近でしたが、私はまだあなたに感謝の言葉を述べる必要があります。解決策を受け入れる! –

関連する問題