jquery - jquery模态提交按钮替换窗口数据

Question

我有一个 jquery 模式设置，当用户单击表单提交时会出现。此窗口是对表单中输入的所有数据的确认窗口。我有 2 个按钮，Go 和 cancel。当用户单击取消时，它会返回到表单，他们可以重新提交或做任何事情。当用户单击 Go 时，数据被传递给表单操作值，在本例中为“complete.php”。我想要做的是让模态提交触发一个ajax，它将完成所有的东西complete.php，然后在我们所在的同一个模态窗口中返回结果......

http://jsfiddle.net/UMenY/1/

 <form name='myForm' id='myForm' action='#' method='POST'>
  <input type='text' name='firstName' id='firstName'>
  <input type='button' value='submit' id='subButton'>
</form>
 <div id='dialog'>
 <p id='firstName'></p>
 </div>
 </div>


    $('#dialog').dialog({
        autoOpen: false,
        width: 800,
        modal: true,
        resizable: false,
        buttons: {
            "Go": function () {
                document.myForm.submit();
            },
                "Cancel": function () {
                $(this).dialog("close");
            }
        },
    });
    $('#subButton').click(function () {
        $("p#firstName").html($('#firstName').val());
        $('#dialog').dialog('open');
        return false;
    });

在我制作的这个快速的小 jsfiddle 中，我想通过 ajax 将模态值表单输入提交给 complete.php，如果完成回击成功，则模态窗口显示“谁被添加到 db”。

我不知道如何在提交操作上添加 .submit(function(){。我唯一能做的就是获得表单操作结果，然后将我带到一个我不想做的新页面。

Answer 1

您需要在open 事件中将提交回调绑定到您的表单。

        open: function(event, ui){
            $(this).parents('form:first').submit(function(){});
        }

添加了更新的 JSFIDDLE：http: //jsfiddle.net/mac1175/Hwqjk/

JS

    $('#dialog').dialog({
        autoOpen: false,
        width: 800,
        modal: true,
        resizable: false,
        buttons: {
            "Go": function () {
                $('#myForm').trigger('submit');
            },
                "Cancel": function () {
                $(this).dialog("close");
            }
        },
        open: function (event, ui) {
            $('#myForm').submit(function (e) {
                console.log('do ajax call here');
                e.preventDefault();

                return false;

            });
            console.log('fomr bound');
        }
    });
    $('#subButton').click(function () {
        $("p#firstName").html($('#firstName').val());
        $('#dialog').dialog('open');
        return false;
    });