jQuery - 提交带有锚点的表单答案

【问题标题】：jQuery - submit a form with an anchorjQuery - 提交带有锚点的表单
【发布时间】：2012-01-31 22:55:09
【问题描述】：

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

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

【问题讨论】：

有时人们将按钮设计为看起来像一个锚，而不是相反。
查看源代码here 使提交按钮看起来像一个锚。

标签： jquery forms form-submit

【解决方案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();
});

【讨论】：

【解决方案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').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);}
    });         
    }               
});

【讨论】：

【解决方案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);}
    });         
    }
});

【讨论】：