jQuery UI對話框表單在提交時傳遞變量

Question

我有jQuery UI的演示表單，如下所示。我如何通過ajax提交數據到一個名爲add.html.php的頁面？

風格

<style> 
    body { font-size: 62.5%; } 
    label, input { display:block; } 
    input.text { margin-bottom:12px; width:95%; padding: .4em; } 
    fieldset { padding:0; border:0; margin-top:25px; } 
    h1 { font-size: 1.2em; margin: .6em 0; } 
    div#users-contain { width: 350px; margin: 20px 0; } 
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } 
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } 
    .ui-dialog .ui-state-error { padding: .3em; } 
    .validateTips { border: 1px solid transparent; padding: 0.3em; } 
</style> 

腳本

<script> 
$(function() { 
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
    $("#dialog:ui-dialog").dialog("destroy"); 

    var name = $("#name"), 
     email = $("#email"), 
     password = $("#password"), 
     allFields = $([]).add(name).add(email).add(password), 
     tips = $(".validateTips"); 


    $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true, 
     buttons: { 
      "Create an account": function() { 
       var bValid = true; 
       allFields.removeClass("ui-state-error"); 

       if (bValid) { 

        $("#users tbody").append("<tr>" + 
         "<td>" + name.val() + "</td>" + 
         "<td>" + email.val() + "</td>" + 
         "<td>" + password.val() + "</td>" + 
        "</tr>"); 
        $(this).dialog("close"); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      allFields.val("").removeClass("ui-state-error"); 
     } 
    }); 

    $("#create-user") 
     .button() 
     .click(function() { 
      $("#dialog-form").dialog("open"); 
     }); 
}); 
</script> 

HTML

<div class="demo"> 

<div id="dialog-form" title="Create new user"> 
<p class="validateTips">All form fields are required.</p> 

<form> 
<fieldset> 
    <label for="name">Name</label> 
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> 
    <label for="password">Password</label> 
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> 
</fieldset> 
</form> 
</div> 


<div id="users-contain" class="ui-widget"> 
<h1>Existing Users:</h1> 
<table id="users" class="ui-widget ui-widget-content"> 
    <thead> 
     <tr class="ui-widget-header "> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Password</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John Doe</td> 
      <td>john.doe@example.com</td> 
      <td>johndoe1</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
    <button id="create-user">Create new user</button> 
</div><!-- End demo --> 
<div class="demo-description"> 
     <p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> 

Answer 1

首先，你需要給形式的ID，並給它一個辦法提交。 （在這個例子中的按鈕）

<form name="loginForm" id="loginForm"> 
    //Inputs 
    <button type="button" id="submitButton">Submit</button> 
</form> 

然後，你要上拋出click事件上的按鈕的形式提交給Ajax調用。

$('button#submitButton').click(
function() 
{ 
    $.ajax(
    { 
     type:"POST", 
     url:"add.html.php", 
     data: $('#loginForm').serialize(), 
     success: function(message) 
     { 
      //code to execute if the ajax doesn't throw an error 
     }, 
     error: function(jqXHR, textStatus, errorThrown) 
     { 
      //code to execute if the ajax does throw an error 
     } 
    }); 
}); 

Answer 2

在你form，添加的輸入類型提交：

<input type='submit' value='submit' /> 

或者，你也可以只創建提交表單的功能：

function fncSubmit() { 
    $('form').trigger('submit'); 
} 

在添加此ready block：

$('form').submit(function() { 
    $.ajax(
    { 
     type: 'POST', 
     url: 'add.html.php', 
     data: $(this).serializeArray(), 
     success: function(data, textStatus, jqXHR) 
     { 
      //code 
     }, 
     error: function(jqXHR, textStatus, errorThrown) 
     { 
      //code 
     } 
    }); 
});