Question

我想提交一个带锚而不是按钮的表格这是我的表单的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);}
    });         
    }               
}); 
});

但这不起作用。你有什么结论吗？

Answer 1

在.sendmail点击处理程序中，您为表单设置了提交处理程序，但实际上并未提交。尝试将该代码$('#subscribe').submit(function(e){ ...移到点击处理程序之外，并使用您发布的原始处理程序$('#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);}
    });         
    }               
});

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

这适用于作为.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);}
    });         
    }               
});

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

jQuery - 提交一个带锚点的表单

3 个答案: