在表单提交之前加载 ajax 对话框答案

【问题标题】：Load ajax dialog before form submit在表单提交之前加载 ajax 对话框
【发布时间】：2015-06-10 03:42:42
【问题描述】：

如何禁用使用 ajax 的表单提交？在提交表单之前，用户必须先点击 ajax 对话框中的按钮。

//on form submit 
//I'm using input type submit and not button (as much as possible, I don't want to change that)

 $.ajax({
            type: "POST",
            url: "<?=url::base(TRUE)?>prompt",
            data: $('#formname').serialize(),
            async: false,
            success: function(response){
                $("#dialogpromt").html(response);
                $("#dialogpromt").dialog({
                    autoOpen: true, 
                    height: 'auto', 
                    width: '100', 
                    resizable: 'false',
                    dialogClass: 'dFixed'                    
                });        
                 //onlcick event would change a hidden field to '1' 
                 //works fine
            },

        });


        //Is there a way I can ensure that the dialog above is closed first before the below lines will execute?
        if(document.getElementById('submitInd').value == "0")
             return false; 
        else
             return true;

提前致谢！

【问题讨论】：

有必要在表单提交时调用这个动作吗？还有另一种方法吗？告诉我
是的，表单提交时需要此操作。

标签： javascript jquery html ajax forms

【解决方案1】：

   $("Your Submit button Id").click(function (event) {

    event.preventDefault(); // this will be used to stop the reloading the page 

    $.ajax({
        type: "POST",
        url: "<?=url::base(TRUE)?>prompt",
        data: $('#formname').serialize(),
        async: false,
        beforeSend: function () { /// use beforeSend to open a dialog box 

            $("#dialogpromt").dialog({
                autoOpen: true,
                height: 'auto',
                width: '100',
                resizable: 'false',
                dialogClass: 'dFixed'
            });


        },
        success: function (response) {
            $("#dialogpromt").html(response);

            //tried the if else here, no luck.
            //the dialog will just load but the form will still continue to submit                             
        }

    });
});

【讨论】：

@me_an 你的意思是重新加载页面？

【解决方案2】：

有几种方法可以使按钮不提交。我开始使用表单时学到的方法是使用跨度而不是按钮。

一种更好、更简单的方法，因为它可以让你保持你的按钮结构，就是简单地写

<button type='button'>....</button>

我不确定它到底做了什么，但包括 type='button，与表单中默认的 type='submit' 不同，它会抑制默认的表单提交操作。

还有其他方法可以使用 javascript 进行更改，例如手动取消默认操作，甚至不使用表单，而是使用类“form”将项目包装在 div 中，以及大量其他方法多种方式满足您的需求。

【讨论】：