在 jQuery 中使用链接提交表单不起作用答案

【问题标题】：Using a link to submit form in jQuery won't work在 jQuery 中使用链接提交表单不起作用
【发布时间】：2012-01-11 14:00:42
【问题描述】：

我有一个小表单和一个使用 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>

【问题讨论】：

试试<a href="#" title="" class="pay-button" style="margin-top:5px;" onclick="$('#myform').submit();">SUBMIT</a>
您的代码缺少 }); 来关闭 document.ready 处理程序。这是一个错字吗？如果不是，它可能会导致问题。
谢谢罗里，有一个错字，但还是不行

标签： jquery ajax forms post

【解决方案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 的用户将无法提交您的表单。

【讨论】：

【解决方案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" />
```

【讨论】：

【解决方案3】：

你可以这样做：

document.forms[0].submit()

或

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

【讨论】：

【解决方案4】：

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

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

【讨论】：