Question

我有一个jquery模式设置，当用户点击表单上的提交时出现。此窗口是表单中输入的所有数据的确认窗口。我有2个按钮，Go和取消。当用户点击取消时，它会返回到表单，他们可以重新提交或做任何事情。当用户单击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 event。

中的表单

        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;
    });

jquery模式提交按钮来替换窗口数据

1 个答案:

JS