提交前使用jquery对话框确认

Question

我正在使用表单，我想在表单提交之前进行确认。在我在 javascript 中使用确认之前，但现在我想用 jquery 的对话框 UI 替换它。我希望当用户单击“Valider”按钮时，他可以通过单击提交或取消来选择提交表单。我是 jQuery 的初学者，这是我的代码，但我不工作。

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
    $('#valider').click(function(){
        $('#dialog').dialog({
            modal: true,
            buttons:{
            "submit":function(){
                document.form1.submit();
            },
            "cancel":function(){
                    $(this).dialog("close");
                }
            }
        });

    });
        $('form#testconfirmJQ').submit(function(e){
            e.preventDefault();
            $('#dialog').dialog('open');
        });

 });

</script>
<form action="test.php" method="post" name="form1">
    <input type="submit" name="valider" class="valider" id="valider" value="valider"/>
</form>
    <div id="dialog" title="Confirmation">
    </div>
</div>

当我单击“验证器”时，我会短暂显示对话框，并提交表单。我对我的代码有点困惑。有人可以告诉我我做错了什么。提前致谢。

Answer 1

您的 jQuery 正在寻找 $('form#testconfirmJQ')，因此它正在寻找 ID 为 testconfirmJQ 的 form。你没有这样的表单，所以 jQuery 找不到元素。您可以从代码中删除 id，使其看起来像 $('form').submit(function(e){，或者将 id 添加到表单中，使其看起来像 <form action="test.php" id="testconfirmJQ" method="post" name="form1">