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更改此设置，例如手动取消默认操作，甚至不首先使用表单，而是使用类＆＃39; form＆＃39;将项目包装在div中，以及其他适合您需求的多种方式。

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

2 个答案: