2011-01-30 8 views
1

私はこのようなデフォルト値を予め充填されたフィールドを持つフォームを持っている:フォームの送信時にテキストボックスの値を変更するにはどうすればよいですか?

テキストボックスをクリックすると、クラス unfilledがテキストボックスから削除され、テキストボックスはそう空白作られ
<input type=text name=first value="First Name" class="unfilled" /> 

ユーザーは自分の情報を入力することができます。

問題は、フォームが送信されたときに、これらのデフォルト値で送信され、サーバー側の検証を妨害していることです。フォームを送信するときに、デフォルト値を持つすべてのフィールドが空白になるようにするにはどうしたらよいですか。サーバー側の検証で「このフィールドを入力してください」というエラーがスローされます。

私が働いていない、次のコードをしようとしている:

$("#myForm").submit(function() 
     { 
      $(".unfilled").val(''); 
     } 
); 

これは、フィールドを空白にするんが、サーバーはまだ彼らの以前のデフォルト値でそれらを受け取ります。

+0

それはあなたが 'submit'法上の閉じ括弧が欠落しているだろうか? – Phil

+0

いいえ、私はコピーして貼り付け&その行を逃したばかりです –

答えて

3

あなたは単に構文エラーがあると思います。 submitメソッドの閉じ括弧がありません。

は、私はちょうどこれをホイップし、それが正常に動作します

<!DOCTYPE html> 
<html> 
    <body> 
     <?php 
     var_dump($_POST); 
     ?> 
     <form action="test.php" method="post"> 
      <input type="text" name="first" value="First Name" class="unfilled"> 
      <input type="submit"> 
     </form> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      jQuery(function($) { 
       $('form').submit(function() { 
        $('.unfilled').val(''); 
       }); 
      }); 
     </script> 
    </body> 
</html> 
+0

あなたは正しいですが、構文エラーではなく、サーバサイドコードのどこかでデフォルト値でフィールドをリセットしていた別のバグです –

0

JQueryの.click()関数が必要だと思います。

例:

$(function() { // shorthand for document.ready 
     $('.unfilled').click(function() { 
     $(this) 
      .val('') 
      .removeClass('unfilled'); 
     }) 
    }); 

UPDATE

申し訳ありませんが、私は、あなたをmissunderstandプレースホルダのような機能が必要と思いました。

あなたはreturn false;で行うことができますが、これは送信をキャンセルします。あるいは、GreenWebDevがe.preventDefault();を使うと言うように。

+1

送信は、フォームの送信アクションをキャプチャするための正しいイベント(onsubmit)です。 http://api.jquery.com/submit/ –

3

最初にフォームの実行を停止し、値を変更して、手動でフォームを送信する必要があります。

$("#myForm").submit(function(e) 
{ 
    // Stop the form submit 
    e.preventDefault(); 

    $(".unfilled").val(''); 
    $(this).submit(); 
} 
+0

このコードを試しても、フォームはまったく送信されません。それはつまらない –

+0

あなたはこれをまったく行う必要はありません – Phil

+0

これは、フォームを送信するためにトリガー、$(this).trigger( 'submit')を使う必要があるからです。 http://api.jquery.com/trigger/ –

0

あなたが提出するフォーム、または虚偽をしたい場合、あなたがいない場合は、return true;に持っています。 このアプローチの問題点は、フィールドを値をポストする前に「点滅」させて、プロフェッショナルではない感触を少し作り出すことです。 隠し値を使用して、submit()イベントに設定する方が良いです。

+0

デフォルトのイベントハンドラが実行されないようにするには 'false'を返す必要があります。デフォルトは 'return true;と等価です – Phil

関連する問題