Question

我有以下代码。

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

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

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

Answer 1

这种情况正在发生，因为您使用e.preventDefault();来阻止您的表单提交。要提交，请将代码放在代码的末尾：$( "form" ).submit();。

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

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

Answer 2

如果要在完成ajax请求时运行代码，请设置succes参数：

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

如果您只是将代码置于ajax请求之后，它将在请求开始后立即运行，而不是在成功之后运行。

Answer 3

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

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

而不是

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

但是使用带有CSS的表单按钮呢？

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

表单提交后的jquery弹出窗口

3 个答案: