使用一个链接到jQuery的形式提交将无法正常工作 [英] Using a link to submit form in jQuery won't work

问题描述

我有一个小的形式和提交使用jQuery和POST这种形式的链接。我希望显示来自表单页面的过程中页面的HTML输出，而无需使用AJAX刷新。然而，我的code似乎没有工作，当我点击我提交的链接。请能有人指出我可能是错在这里做什么？非常感谢。

问候

 ＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-1.4.2.min.js＆GT;

＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（文件）。就绪（函数（）{
            $（'＃MyForm的）。递交（函数（）{
                .post的$（'demoprocess.php'，$（＃MyForm的）。序列化（），功能（数据）{
                    $（'＃结果）HTML（数据）;
                }）;
            }）;
}）;
    ＆LT; / SCRIPT＆GT;

＆LT;表格名称=MyForm的ID =MyForm的行动=的方法=POST＆GT;
    ＆LT;标签=名称ID =name_label＆GT;名称＆LT; /标签＆gt;
    ＆LT;输入类型=文本名称=名称ID =名字大小=30值=/＆GT;＆LT; BR＆GT;＆GT;

    ＆LT;标签=电子邮件ID =email_label＆GT;电子邮件＆LT; /标签＆gt;
    ＆LT;输入类型=文本名称=电子邮件ID =电子邮件大小=30值=/＆GT;＆LT; BR＆GT;

    ＆LT; A HREF =＃标题=级=付费按钮的风格=的margin-top：5px的;的onclick =document.myform.submit（）＆GT;提交＆LT; / A＆GT;
＆LT; /形式GT;

＆LT;  - ！我们将输出demoprocess.php结果在这里 - ＆GT;
＆LT; D​​IV ID =结果 -  GT;＆LT; D​​IV＆GT;
 

解决方案

麻烦的是，你要绑定一个的的jQuery 的提交的处理程序，但射击中的原生的DOM 的提交方法。这不火提交事件，因此jQuery的处理程序是永远不会得到通知。

您应该引发与jQuery的事件，而不是。这可能也是最容易做到这一点jQuery的，而不是使用的onclick 属性：

  $（'付费按钮）。点击（函数（五）{
    即preventDefault（）; // prevent链接的默认行为
    $（'＃myForm会）提交（）。 // trigget提交处理程序
}）;
 

请注意，这不是很好的设计，国际海事组织，因为没有JavaScript的用户将无法提交表单。

I have a small form and a link which submits this form using jQuery and POST. I wish to display the HTML output from the process page on the form page without refreshing using AJAX. However, my code doesn't seem to work when I click my submit link. Please can someone point out what I may be doing wrong here? Many thanks.

Regards

<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>

解决方案

The trouble is that you are binding a jQuery submit handler but firing the native DOM submit method. This does not fire a submit event, so the jQuery handler is never notified.

You should trigger the event with jQuery instead. It's probably also easiest to do this in jQuery, rather than using an onclick attribute:

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

Note that this isn't very good design, IMO, because users without Javascript will not be able to submit your form.

这篇关于使用一个链接到jQuery的形式提交将无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！