CODEWITHSUNDEEP
jqueryformsform-submit
Nils
Nils

Reputation: 45

jQuery - submit a form with an anchor

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?

Upvotes: 2

Views: 9797

Answers (3)

Jasper
Jasper

Reputation: 75993

//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;
});

This will work for all .sendmail elements that are descendants of a form element. .closest() finds the first element that is a direct ancestor to the root element that matches the selector (in this case form).

Here is a demo: http://jsfiddle.net/4hsPE/

It appears as though your form.submit event handler is nested within the click event handler for the link. The form.submit event handler should be in the same scope as the click event handler for the link:

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

Upvotes: 2

ahmet2106
ahmet2106

Reputation: 5007

Try to seperate them:

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

Upvotes: 0

kitti
kitti

Reputation: 14794

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

Upvotes: 4

Related Questions