jQuery:如何在不关闭jQuery对话框的情况下提交表单

时间:2014-08-04 03:07:35

标签: jquery html jquery-dialog html-form-post

我在jQuery对话框中有一个html表单。

目前,当我点击"添加"表单中的按钮(其行为类似于"提交"但只是添加一些数据检查机制),jQuery对话框将关闭。

但是用户可能想要添加更多项目,因此我不想在点击&#34后添加"按钮。

以下是代码段。

<head>
    <script>
            $(document).ready(function(){
                    $( "#add_post" ).dialog({
                        autoOpen: false,
                        width: 600
                    });
                    $( "#add_post" ).click(function() {
                        $( "#add_data" ).dialog( "open" );
                    });

                    $('#postForm').submit(function() {
                        return false;
                    });
            });
    </script>
</head>

<body>
    <script>
        function checkData() {
            // always return true now
            return true;
        }

        function submitData() {
            if (checkData()) {
                document.getElementById("postForm").submit();
            }
        }
    </script>

    <input id="add_post" type="button" value="Add Post" />

    <form id="postForm" name="postForm" action="add_something" method="post">
        <input type="hidden" name="postUser" value="User"/>
        <input id="add_button" type="button" value="add" onclick="submitData()"/>
    </form>
</body>

我已经阅读了另一篇关于不通过添加以下内容来关闭对话框的文章

$('#postForm').submit(function() {
    return false;
});

但它似乎无法发挥作用。

任何人都有任何想法?

提前致谢。

埃里克

1 个答案:

答案 0 :(得分:1)

你可以使用jquery的ajax。

$('#postForm').submit(function() {

  var data = $(this).serializeArray();
  var formURL = $(this).attr("action");
   $.ajax({
        url : formURL,
        type: "POST",
        data : data,
     success:function(result){
         $("#div1").html(result);
     }});
  e.preventDefault(); 
   e.unbind(); //stop multiple form submit.
});

另一种选择是不要使用<form>只使用按钮

$('#button').onClick(function() {

  var data = "name="+$("#txtName").val()+"&age="+$("#txtAge").val();
   $.ajax({
        url : "formController",
        type: "POST",
        data : data,
     success:function(result){
         $("#div1").html(result);
     }});
});