在表单提交之前加载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中，以及其他多种通用方法，符合您的需求。