Question

I want to submit a form with an anchor instead of a button.
Here is my html code for the form:

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

Using this jQuery works fine:

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

But I want to verify the input field, so I added this to my jQuery code:

$('.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);}
    });         
    }               
}); 
});

But this doesn’t work. Do you have any conclusion?

Answer 1

In your .sendmail click handler, you set the submit handler for the form but don’t actually submit it. Try moving that code $('#subscribe').submit(function(e){ ... outside of the click handler and use the original handler you posted $('#subscribe').submit();

EDIT:
In other words…

$('#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();
});