加載文件到jQuery的對話框

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> 

，當我點擊這個鏈接，加載page2.php文件在jquery對話框中的表單值。

這是我的腳本

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

這些腳本正常工作負載page2.php文件。

現在的問題是，

當我提出這將是re-directed到page2.php的page2.php形式值。 但我想留在我的page1.php。

如何實現此目的？在此先感謝

Answer 1

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

有一個愉快的一天！

Answer 2

看你如何不提供表單，只能做出假設。

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