表单提交后的Jquery弹出窗口

jquery popup after form submission

本文关键字：窗口 Jquery 表单提交      更新时间：2023-09-26

我有以下代码:

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

我使用链接的唯一原因是因为设计师已经设计了链接按钮，而不能做提交按钮。

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

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

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

此外，请注意，当您调用$("#dialog").dialog({modal: true, height: 200, width: 300 });时，它将在调用$( "form" ).submit();之后关闭。问题是，我不明白为什么要在提交表单时打开一个对话框。

如果您希望代码在ajax请求完成时运行，请设置success参数:

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

如果您只是将代码放在ajax请求后面，它将在请求启动后立即运行，而不是在请求成功后运行。

我认为你以错误的方式获得了价值。你应该使用

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

代替

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

但是如何使用表单按钮与CSS?

input[type=submit] {
    background: none;
    border: none;
    cursor: Pointer;    
}
相关文章：