0

我只是混淆了jquery dialog和php form submit

我有两种形式，page1.php和page2.php

在page1.php，我有<a>链接

<a id="addNew"> Add New </a>
<div id="myDiv"> 
       <!-- load 'page2.php' file using this div --> 
</div>

当我单击此链接时，page2.php在 jquery 对话框中加载带有表单值的文件。

这是我的脚本

<script>
   $("#addNew").click(function() {
       $("#myDiv").load('page2.php').dialog({modal:true}); 
   });
</script>

这些脚本可以很好地加载page2.php文件。

现在我的问题是，

当我提交表单值时page2.php，它将re-directed是page2.php. 但我想留在我的page1.php.

我该如何做到这一点？提前致谢

4

2 回答 2

1

鉴于您没有提供表格，只能做出假设。

<form id="some_form" action="page2.php" method="post">
    <input type="text" name="user_name"/>
    //a collection of form elements
<form>

然后使用 ajax，并捕获表单提交事件，同时阻止它的默认操作

$(document).on('submit', '#some_form', function(e){
    e.preventDefault(); //stop form from redirecting, also stops sending of data
    var $this = $(this); // cache form object for performance
    $.ajax({
        url: $this.prop('action'),
        type: $this.prop('method'),
        data: {
          handle_form: 'ajax',
          form_data : $this.serializeArray()//array of objects
        },
        success:function(data){
            //data is what is returned from the server if successful
        }
    });
    return false; //just another example of stopping form submit, don't need both
});

然后在您的 page2.php 文件中，检查是否存在一个字段。

if(isset($_POST['user_name']) && $_POST['handle_form'] == 'ajax'):

    //your form is trying to be submit
    //handle the submission
    echo 'We submit the form!'; //is the 'data' in our success function

elseif(isset($_POST['user_name']) && !isset($_POST['handle_form'])):

    //regular form submission, no ajax, no javascript.

endif;
于 2013-05-18T09:18:06.603 回答
0

您可以使用ajaxForm，它会在您加载 page2 时使用 ajax 调用提交表单。例如：

HTML：

<form id="login" action="YOUR_FILE" method="post">
    <label>Name:</label>
        <input type="text" name="name" /><br />

    <label>Password:</label>
        <input type="password" name="pass" /><br />

    <input type="submit" name="submit" value="Login" /> 
</form>

JavaScript：

function processJson(data) {
    // your code goes here
}
$("#login").ajaxForm({
     dataType:  'json',
     success:   processJson // what to do when call succeed 
});

祝你今天过得愉快！

于 2013-05-18T09:16:01.813 回答