3

jqueryを使用してフォームからデータを取得し、次のコードを使用してフォームの送信を停止しようとしています。

$form = $('form#signup')
$form.submit(function(event){
  event.preventDefault();
  var $input=$('#signup :input')
  console.log($input.username)
  alert($input.username)
})

ただし、フォームにはまだpostデータがあり、アラートボックスは表示されません。また、firebugによりエラーが発生$ is not definedし、Node.jsがクラッシュします。

フォーム（ヒスイで書かれた）：

html
  head
    script(src='javascripts/signupValidation.js')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
    script(src='javascripts/validator.js')
  body
    form(id='signup',method='post',action='/signup')
      label Firstname
      input(type='text', name='firstname')
      label Lastname
      input(type='text', name='lastname')
      label Username
      input(type='text', name='username')
      label Password
      input(type='password', name='password')
      label Password again
      input(type='password', name='password2')
      label Email
      input(type='email', name='email')

  input(type='submit',value='Sign up', onclick="")
4

4 に答える 4

3

フォーム関連のJSがファイルにある場合は、そのファイルを含むスクリプト呼び出しをjqueryインクルードの後signupValidation.jsに​​移動する必要があります。

私もおそらくフォームコードを少しクリーンアップするでしょう：

$('form#signup').on('submit', function(event){
  event.preventDefault();
  var $input = $(this).find('[name=username]');
  console.log($input.val());
  alert($input.val());
})

あなたも見てみたいと思うかもしれませ.serialize()ん。

于 2012-08-07T16:34:00.053 に答える
0

コードに問題があります[フォームの送信では問題ありません]

$input.username別の要素を参照するための有効なjQueryではありません。

var usernameInput = $input.filter('[name="username"]');

document.readyにコードを追加していないようですので、おそらく何にも添付していません。次のように変更します。

jQuery( function() {
    $form = $('form#signup');
    $form.submit(function(event){
    });
}

また、jQueryコードの前に検証コードを含めているようです。ブラウザでJavaScriptコンソールを見ると、いくつかのすばらしいエラーメッセージが表示されているに違いありません。

于 2012-08-07T16:35:34.167 に答える
0

フォームが次のコマンドで送信されないようにする必要がありますreturn false。

$form.submit(function(event){

  var $input=$('#signup :input');
  console.log($input.username);
  alert($input.username);

 // data = array of all the information collected from the input tags
 //data = $form.serizalize(); will also work
 data = $(this).serialize();    


  return false;
});


data必要な情報を含む配列になります。console.log(data)すべての構造を確認して、たとえば次のように使用できるようにすることをお勧めします。

if(data.something == anything){
    doThis();
}

;そして、JavaScript文の最後にを追加することを強くお勧めします

于 2012-08-07T16:32:34.777 に答える
0

他の人のように、私はこのようなコードで運が良かった：

$(document).ready(function(){
    // Prevent form submission
    $( "form" ).submit(function( event ) {
      event.preventDefault();
    });
});

フォームの送信を防ぐため。しかしまた、最近では、ページの後ろにスクリプトがあり、アニメーションや「シェイクオフ」効果などのキャンディーコーティングされた機能をHTMLフォームに追加することがよくあります。これらのスクリプトは、送信用に独自のjavascript-fuを持っている可能性があるため、このような状況で邪魔になる可能性があります。

于 2013-09-25T20:49:13.050 に答える