2012-01-02 22 views
20

リフレッシュ後にこのフォームをクリアする最も簡単な方法は何ですか?私が試したやり方は、フォームをクリアしますが、データベースに提出しません。誰か他の人がこれを行うための最善の方法を私に説明することができますか?jQueryで送信した後にフォームをクリア

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
    <script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     $("#newsletterform").validate({ 
      debug: false, 
      rules: { 
       name: "required", 
       email: { 
        required: true, 
        email: true 
       } 
      }, 
      messages: { 
       name: "Please let us know who you are.", 
       email: "A valid email will help us get in touch with you.", 
      }, 
      submitHandler: function(form) { 
       // do other stuff for a valid form 
       $.post('newsletter.php', $("#newsletterform").serialize(), function(data) { 
        $('#results').html(data); 
       }); 

      } 

     }); 
    }); 

    </script> 

</head> 

<div id="content"> 
    <div id="newsletter-signup"> 
     <h1>Sign up for News, Updates, and Offers!</h1> 
     <form id="newsletterform" action="" method="post"> 

      <fieldset> 

       <ul> 
        <li> 
         <label for="name">Name:</label> 
         <input type="text" name="name" /> 
        </li> 
        <li> 
         <label for="email">Email:</label> 
         <input type="text" name="email" /> 
        </li> 
         <div id="results"><div> 
        <li> 
         <input type="submit" value="submit" name="signup" onclick="" />   
        </li> 
       </ul> 

      </fieldset> 

     </form>   
    </div> 
</div> 
</html> 

答えて

58

を読みますのため$('#newsletterform').reset()に電話するだけですはフォームオブジェクトであり、jqueryオブジェクトではありません。それについての詳細はhereを参照してください。

+0

ありがとうございました。私の間違いは、私が間違った場所に置いていたことを気付かなかったということでした。 実際にあなたの答えを説明していただきありがとうございます。 – Kelbizzle

+1

これを実装する前に次の回答を見てください。 – IMLiviu

+1

@IMLiviu以下の答えはこの質問のニーズと一致しません。それは多段形式のものです。また、read moreリンクはそのコードを使用しないように指示しますが、答えには2番目のコードが含まれています。 –

1

詳細はあなたのポストのメソッドコールバック関数

$(':input','#myform') 
.not(':button, :submit, :reset, :hidden') 
.val('') 
.removeAttr('checked') 
.removeAttr('selected'); 

でこれを試してみてください「あなたができる$.post

$('#newsletterform').each(function(){ 
    this.reset(); 
}); 

からのコールバックにこれを追加することができますthis

1

これはあなたのためにこれを行うでしょう。それは、着信XMLオブジェクト

<script type="text/javascript"> 
    $("#formname").resetForm(); 
    </script> 

に来るようにだけ、いくつかのdivまたはTDであなたのアクションファイルに以下を追加

$("#myform")[0].reset(); 
23

あなたはしてフォームをリセットすることができます"formname"は編集したいフォームのIDです

+0

ここでは[0]の使用は何ですか? – Rahul

+3

[0]を使用するとDOMではないネイティブhtml要素が返されます。 –

-3

$('input').val('').removeAttr('checked').removeAttr('selected'); 
4

jQueryでフォームをリセットする方が簡単ですあなたのフォームにresetイベント。

$("#btn1").click(function() { 
     $("form").trigger("reset"); 
    }); 
+1

あなたがここで何をしているのかを説明するいくつかの詳細は高く評価されます。 – skypjack

関連する問題