2012-04-13 6 views
0

私は3つの単純なhtmlフォームを持つページをデータベース内のさまざまなテーブルに送信します(AJAXとJQueryを使用しています)。フォームが送信されると、それが現在消え、メッセージの投稿:送信時にAjax/JQueryフォームリフレッシュ

<div class="success_m" style="display:none;"> 
    <p>Manufacturer has been added!</p> 
    <h4><a href="path/to/the/forms/page">Add another Manufacturer!</a></h4> 
</div> 

がデータベースに別のメーカーを投稿するには、私は「他のメーカーを追加!」をクリックしますリンク全体を更新します。私はそれを設定しようとしましたので、フォームが送信されると消え、成功メッセージが1秒間表示され、クリアされたフォームが戻ってきます...今はフォームが一切消えていないことを除いて、メッセージがその下に点滅するだけです。

私の試行は下記です。アドバイスありがとうございます!成功キューに機能をresetform

マイク

$(document).ready(function(){ 
    $("form#submit_m").submit(function() { 
    // we want to store the values from the form input box, then send via ajax below 
    var manu_name  = $('#manu_name').attr('value'); 
    var manu_web  = $('#manu_web').attr('value'); 
    var manu_email  = $('#manu_email').attr('value'); 
    var manu_phone  = $('#manu_phone').attr('value'); 
    var manu_phone_ext = $('#manu_phone_ext').attr('value'); 
    var manu_info  = $('#manu_info').attr('value'); 

     $.ajax({ 
      type: "POST", 
      url: "process_m.php", 
      data:"manu_name="+ manu_name+"&manu_web="+manu_web+"&manu_email="+manu_email+"&manu_phone="+ manu_phone 
      +"&manu_phone_ext="+manu_phone_ext+"&manu_info="+manu_info, 
      success: function(){ 
       // reset form, success message, refresh form 
       resetForm($('#submit_m')); 
       $('form#submit_m').hide(); 
       $('div.success_m').fadeIn(250).delay(1000).fadeOut(250); 
       $('form#submit_m').show(); 
      } 
     }); 
    return false; 
    }); 
}); 

はSO投稿THISからです。

ご協力いただきましてありがとうございます。

答えて

1

あなたは、フォームの皮を作り、あなたがあなたの成功のdivのようにそれをバックフェードかのようなものを使用する必要が再表示されるように、オープン行方不明とshow()function

... 
$('div.success_m').fadeIn(250).delay(1000).fadeOut(250); 
$('form#submit_m').show(); // add parenthesis here 
... 

の呼び出しに括弧を閉じていますsetTimeout()。今あなたがそれを扱っている方法は、それを隠してから、間に休憩をとって表示します。だから、瞬間...

例に表示されます。

setTimeout(function() { $('form#submit_m').show(); }, 1000); 

Here is a jsFiddle example

+0

おっと...それは簡単でした!私は今それを試してみるよ、ありがとう! – TheNally

+0

OK。フォームが消えないことを除いて、動作します。メッセージは単にその下に表示され、消えます。それは機能的ですが、フォームが消えてユーザーが自分の入力が受け入れられたと確信できるように感じます。 – TheNally

+0

私はあなたの観察を反映するようにOPを編集しました。 – TheNally

関連する問題