jQuery - отправьте форму с привязкой - PullRequest
Новая
       3

jQuery - отправьте форму с привязкой

2 голосов
/ 01 февраля 2012

Я хочу отправить форму с привязкой вместо кнопки.
Вот мой HTML-код для формы: 

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

Использование этого jQuery отлично работает: 

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

Но это не работает. Есть ли у вас какие-либо выводы?

Ответы [ 3 ]

4 голосов
/ 01 февраля 2012

В вашем обработчике кликов .sendmail вы устанавливаете обработчик отправки для формы, но фактически не отправляете его. Попробуйте переместить этот код $('#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();
});
2 голосов
/ 01 февраля 2012 
//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;
});

Это будет работать для всех .sendmail элементов, которые являются потомками form элемента. .closest() находит первый элемент, который является прямым предком корневого элемента, который соответствует селектору (в данном случае form).

Вот демоверсия: http://jsfiddle.net/4hsPE/

Похоже, что ваш обработчик событий form.submit вложен в обработчик событий click для ссылки. Обработчик события form.submit должен находиться в той же области, что и обработчик события click для ссылки: 

$('.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);}
    });         
    }               
});
0 голосов
/ 01 февраля 2012

Попробуйте разделить их: 

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