在提交之前使用jquery对话框进行确认

时间:2015-11-04 15:23:20

标签: jquery forms dialog submit

我正在使用表单,我想在表单提交之前确认。之前我在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>

当我点击&#34; Valider&#34;我简短地给出了对话框,并提交了表单。我对我的代码感到有点困惑。有人能告诉我我做错了什么。提前致谢。

1 个答案:

答案 0 :(得分:0)

您的jQuery正在寻找$('form#testconfirmJQ'),因此它正在寻找ID为form的{​​{1}}。你没有这样的表格,所以jQuery无法找到该元素。您可以从代码中删除ID,因此它看起来像testconfirmJQ或将ID添加到表单中,因此看起来像$('form').submit(function(e){