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

Load ajax dialog before form submit

本文关键字：加载 ajax 对话框 提交 表单      更新时间：2023-09-26

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

提前感谢!

   $("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                             
        }
    });
});

有几种方法可以使按钮不提交。当我开始使用表单时，我学到的是使用span来代替按钮。

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

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

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

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

相关文章：