使用链接在jQuery中提交表单将无法正常工作

Question

我有一个小表单和一个链接,使用jQuery和POST提交此表单.我希望在表单页面上显示流程页面的HTML输出,而不使用AJAX进行刷新.但是,当我单击提交链接时,我的代码似乎不起作用.请有人指出我在这里做错了什么吗？非常感谢.

问候

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">

</script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#myform').submit(function() {
                $.post('demoprocess.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            });
});
    </script>

<form name="myform" id="myform" action="" method="POST">  
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/><br>>

    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value=""/><br>

    <a href="#" title="" class="pay-button" style="margin-top:5px;" onclick="document.myform.submit()">SUBMIT</a> 
</form>

<!-- We will output the results from demoprocess.php here -->
<div id="results"><div>

Answer 1

麻烦的是你绑定了一个jQuery submit处理程序但是解雇了本机DOM submit方法.这不会触发submit事件,因此永远不会通知jQuery处理程序.

您应该使用jQuery触发事件.在jQuery中执行此操作可能也是最简单的,而不是使用onclick属性:

$('.pay-button').click(function(e) {
    e.preventDefault(); // prevent the link's default behaviour
    $('#myForm').submit(); // trigget the submit handler
});

请注意,这不是很好的设计,IMO,因为没有Javascript的用户将无法提交您的表单.