用于表单确认的jqueryui

用于表单确认的jqueryui,jquery,forms,user-interface,dialog,confirmation,Jquery,Forms,User Interface,Dialog,Confirmation,这是我关于StackOverflow的第一个问题,我已经访问了关于jQuery对话框和表单的每个问题,但仍然有一个问题 我正在尝试在表单上实现jQuery确认对话框。窗口实际上没有出现问题,但当我单击“确认”时,表单没有提交 这是Javascript: // Form validation $(function(){ var currentForm; $("#dialog-confirm").dialog({

这是我关于StackOverflow的第一个问题,我已经访问了关于jQuery对话框和表单的每个问题,但仍然有一个问题

我正在尝试在表单上实现jQuery确认对话框。窗口实际上没有出现问题,但当我单击“确认”时,表单没有提交

这是Javascript:

        // Form validation
        $(function(){
            var currentForm;
            $("#dialog-confirm").dialog({
                    autoOpen: false,
                    resizable: false,
                    modal: true,
                    buttons: {
                        'Confirm': function(e) {
                            currentForm.submit();
                            return true;
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                            return false;
                        }
                    }
                });
            $("#news-listing").submit(function(e){
                currentForm=$(this);
                if($("#dialog-confirm").dialog("open"))
                {
                    return false;
                } 
            });
});
还有HTML

<div id="dialog-confirm" title="Empty the recycle bin ?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin: 20px 10px 20px 10px;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<form action="news/action/delete" id="news-listing">
<table id="users-listing">
    <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="url">URL</th>
        <th class="modify">Modify</th>
        <th class="checkcell">Delete</th>
    </tr>   
    <tr class='alt'>
        <td class='id'>".$news['news_id']."</td>";
        <td class='title'>".$news['news_title']."</td>";
        <td>".$this->News->get_url($news['news_id'])."</td>";
        <td class='modify'><a href="modify/1">Modify</a></td>;
        <td><input type="checkbox" name="delete[]" /></td>
    </tr>
</table>
<input type="submit" name="submit" />
</form>

问题是执行此行时,
currentForm
undefined

currentForm.submit();
将引发错误,因为
undefined
没有
submit
方法

您试图在表单本身的
submit
事件处理程序中设置
currentForm
的值,因此您遇到了鸡和蛋的问题。您需要将表单元素分配给事件处理程序外部的
currentForm

$(function() {    
    var currentForm = $("#news-listing");
    $("#dialog-confirm").dialog({
        //Dialog options...
        //currentForm.submit() will now work here
    });
    $("#news-listing").submit(function(e) {
        //Event handler...
        //This will be executed when currentForm.submit() is called
    });
});

currentForm
变量需要使用表单元素初始化

改变

var currentForm;


您是否在Firefox、Chrome或Safari的errorconsole中查看过?也许你犯了一个javascript错误。谢谢你抽出时间!您的解决方案删除了“undefined”错误,但“confirm”按钮仍不会提交表单,不会引发任何错误。事件处理程序的作用是什么?当前,它将始终返回false。如果要检查对话框是否打开,您需要的是
isOpen
方法,而不是
open
。提交处理程序必须打开对话框进行确认,如果单击“确认”,则它实际上会提交表单。好的,我找到了我的答案:只需将“currentForm.submit()”替换为“document.getElementById().submit()”。我不知道为什么,但是对话框方法中的jQuery选择器不可用。。。
var currentForm;
var currentForm = document.getElementById("news-listing");