jquery制作输入按钮提交表单

Question

我有一个简单的表单，如下所示:

<form action="#" name="submit" method="post">
        <input name="zip" id="zip" type="text" value="" class="zip-start" />
        <div class="form-submit"><a href="" id="zipformSubmit" rel="zipformSubmit" class="zipformSubmit">Submit</a></div>
    </form>

我的 JS 看起来像这样:

<script> 
    $(document).ready(function() { 
    $("a[rel=zipformSubmit]").click(function(e) { 
        e.preventDefault();
         var zip = $('#zip').val();
         if (zip.length < 5) { alert("Please enter a valid zip code"); return false;};
        $.colorbox({href: "/ppc/form.htm?zip=" + zip, iframe:true, innerWidth:800, innerHeight:600}); 
    }); 
    });  
</script>

问题是用户只能通过单击提交按钮来提交此表单。关于如何调整 js 以便输入按钮也提交表单有什么想法吗？

提前致谢

Answer 1

也使用 jQuery 的 submit ^[docs]方法来监听点击 Enter 提交的表单。

<script> 
    function submitHandler(e) {
        e.preventDefault();
        var zip = $('#zip').val();
        if (zip.length < 5) { alert("Please enter a valid zip code"); return false;};
        $.colorbox({href: "/ppc/form.htm?zip=" + zip, iframe:true, innerWidth:800, innerHeight:600});
    }

    $(document).ready(function() { 
        $('form').submit(function(e) {
            submitHandler(e);
        });

        $("a[rel=zipformSubmit]").click(function(e) { 
            submitHandler(e);
        }); 
    });  
</script>

但是，您应该将此 $('form') 更改为更具体的内容。为表单添加一个 id 就完美了。