jQuery - アンカー付きフォームを送信

Question

ボタンの代わりにアンカー付きのフォームを送信したいと思います。正常に動作します

<form id="subscribe" action="index.html" method="POST"> 
<input type="text" name="email" id="email" /><a class="sendmail">Subscribe</a> 
</form> 

このjQueryのを使用する：
はここにフォームのための私のhtmlコードである

$('.sendmail').click(function() { 
    $('#subscribe').submit(); 
}); 

しかし、私は、入力フィールドを確認したいので、私は私のjQueryのコードにこれを追加しました：

$('.sendmail').click(function() {  
$('#subscribe').submit(function(e){ 
    e.preventDefault(); 
    if ($('#email').val() == "") { 
     $('.falsification').fadeIn(1000); 
    } 
    else {   
    $.ajax({ 
     type: "POST", 
     url: "submit.php", 
     data: "email="+ $('#email').val(), 
     success: function() { 
      $('.falsification').hide(); 
      $('#subscribe').hide(); 
      $('.verification').fadeIn(1000);} 
    });   
    }    
}); 
}); 

しかし、これは機能しません。結論はありますか？

Answer 1

、あなたは、フォームの提出ハンドラを設定したが、実際にそれを提出しないでください。クリックハンドラのコード$('#subscribe').submit(function(e){ ...外を移動してみて、あなたが$('#subscribe').submit();

EDIT掲載元のハンドラを使用します。つまり を...

$('#subscribe').submit(function(e){ 
    e.preventDefault(); 
    if ($('#email').val() == "") { 
     $('.falsification').fadeIn(1000); 
    } 
    else {   
    $.ajax({ 
     type: "POST", 
     url: "submit.php", 
     data: "email="+ $('#email').val(), 
     success: function() { 
      $('.falsification').hide(); 
      $('#subscribe').hide(); 
      $('.verification').fadeIn(1000);} 
    });   
    }    
}); 

$('.sendmail').click(function() {  
    $('#subscribe').submit(); 
}); 

Answer 2

//bind click event handler to link 
$('.sendmail').click(function() { 

    //find the form that this link is in and trigger a submit event for the form 
    $(this).closest('form').trigger('submit'); 

    //return false to stop the default behavior of the link 
    return false; 
}); 

これはform要素の子孫であるすべての.sendmailの要素のために動作します。 .closest()は、セレクタ（この場合はform）と一致するルート要素への直接の祖先である最初の要素を検索します。ここで

はデモです：http://jsfiddle.net/4hsPE/

あなたform.submitイベントハンドラをリンクするためにclickイベントハンドラ内にネストされているかのようにそれが表示されます。 form.submitイベントハンドラは、リンクのclickイベントハンドラと同じスコープにする必要があります：あなたの.sendmailクリックハンドラで

$('.sendmail').click(function() { 
    $(this).closest('form').trigger('submit'); 
    return false; 
}); 

$('#subscribe').submit(function(e){ 
    e.preventDefault(); 
    if ($('#email').val() == "") { 
     $('.falsification').fadeIn(1000); 
    } 
    else {   
    $.ajax({ 
     type: "POST", 
     url: "submit.php", 
     data: "email="+ $('#email').val(), 
     success: function() { 
      $('.falsification').hide(); 
      $('#subscribe').hide(); 
      $('.verification').fadeIn(1000);} 
    });   
    }    
}); 

Answer 3

は、それらを区切るようにしてください：

たまに

$('.sendmail').click(function() { 
    $('#subscribe').submit(); 
}); 

$('#subscribe').submit(function(e){ 
    e.preventDefault(); 
    if ($('#email').val() == "") { 
     $('.falsification').fadeIn(1000); 
    } 
    else {   
    $.ajax({ 
     type: "POST", 
     url: "submit.php", 
     data: "email="+ $('#email').val(), 
     success: function() { 
      $('.falsification').hide(); 
      $('#subscribe').hide(); 
      $('.verification').fadeIn(1000);} 
    });   
    } 
});