javascript - 在表单提交之前加载 ajax 对话框

Question

如何使用 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;            

提前致谢！

Answer 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                             
        }

    });
});

Answer 2

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

一个更好、更简单的方法，因为它允许你保持你的按钮结构，是简单地写

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

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

还有其他方法可以使用 javascript 来改变这一点，例如手动抑制默认操作，甚至不首先使用表单，而是使用类“form”将项目包装在 div 中，以及大量其他通用方法适合您的需求。