提交前使用 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>

当我点击 "Valider" 时，我有一个简短的对话框，表单已提交。我对我的代码有点困惑。有人可以告诉我我做错了什么。提前致谢。

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

提交前使用 jquery 对话框确认

use jquery dialog to confirm before submitting

forms

jquery

dialog

submit