Question

我只是与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>

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

这是我的剧本

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

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

现在我的问题是，

当我提交page2.php的表单值时，它会re-directed到page2.php。但我希望留在我的page1.php。

如何实现这一目标？提前致谢

Answer 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;

Answer 2

您可以使用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 
});

度过美好的一天！

将文件加载到jquery对话框中

2 个答案: