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处理程序，但却触发了 native 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的用户将无法提交您的表单。

Answer 2

问题是您的表单不包含任何触发javascript submit事件的元素

来自jquery文档.submit() ：

当用户尝试提交表单时，会将提交事件发送给元素。它只能附加到元素上。可以通过点击明确的<input type="submit">，<input type="image">或<button type="submit">或在某些表单元素具有焦点时按Enter键来提交表单。

因此，为了使.submit()成功，您需要添加以下内容之一：

<input type="submit">，
<input type="image">，
或<button type="submit">。

到您的表单，因此您需要添加以下内容：
```
<input type="submit" />
```

Answer 3

你可以这样做：

document.forms[0].submit()

或

$('#myform').submit();

Answer 4

尝试阻止表单提交时的默认行为：

$('#myform').submit(function(ev){
    ev.preventDefault();
    $.post('demoprocess.php', $("#myform").serialize(), function(data) {
        $('#results').html(data);
    });
});

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

4 个答案: