表单提交后弹出jquery答案

【问题标题】：jquery popup after form submission表单提交后弹出jquery
【发布时间】：2014-07-14 16:33:27
【问题描述】：

我有以下代码。

<script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function (e) {
                e.preventDefault();

               /* Get some values from elements on the page: */
                var values = $(this).serialize();
                $.ajax({
                    url: "submit.php",
                    type: "post",
                    data: values            
                });
                $("#dialog").dialog({modal: true, height: 200, width: 300 });



            });
        });
    </script>


<body>
<form id="contactfrm">
<input type="text" name="fullname"/>
<input type="text" name="email"/>
<input type="text" name="phone"/>
<a href="" class="submit" id="submit">submit</a>
</form> 
</body>

我使用链接的唯一原因是设计师设计了链接按钮，但无法执行提交按钮。

现在，当我单击按钮时，它会弹出窗口，但它从不提交表单。我不明白为什么会这样？

【问题讨论】：

你的意思是ajax代码没有执行？？

标签： javascript jquery forms popup

【解决方案1】：

发生这种情况是因为您使用了e.preventDefault();，这会阻止您提交表单。为了提交它，请在您的代码末尾添加：$( "form" ).submit();。

当您调用$.ajax(...) 方法时，将进行异步调用，因此不会提交表单。

另外，注意当你调用$("#dialog").dialog({modal: true, height: 200, width: 300 });时，调用$( "form" ).submit();后会关闭。问题是，我不明白要提交表单时打开对话框的原因。

【讨论】：

【解决方案2】：

如果你想让代码在ajax请求完成后运行，设置succes参数：

$.ajax({
    url: "submit.php",
    type: "post",
    data: values,
    success: function(data){
        $("#dialog").dialog({modal: true, height: 200, width: 300 });
    }
});

如果你只是把代码放在ajax请求后面，它会在请求开始后立即运行，而不是在请求成功时运行。

【讨论】：

【解决方案3】：

我认为您以错误的方式获取值。你应该使用

 var values = $(this).parent().serialize();

而不是

var values = $(this).serialize();

但是如何在 CSS 中使用表单按钮呢？

input[type=submit] {
    background: none;
    border: none;
    cursor: Pointer;    
}

【讨论】：