在jQuery對話框中提交表單

Question

我知道這個問題之前已經被問過了，但沒有一個解決方案似乎對我有用。

我有一個jQuery UI的對話框內的一種形式：

<!-- Dialog: Register new user--> 
<div id="dialogForUser" title="Register new user"> 
    <form id="target" action="" method="post" style="HEIGHT: 100%"> 
    <div class="form_settings"> 
    <h3>Enter user details:</h3> 

    <p><span>name</span> 
     <input width=150px id ="edName" name="edName" value="<?php echo htmlentities($name); ?>" /> 
    </p> 
    <p><span>surname</span> 
     <input width=150px id ="edSurname" name="edSurname" value="<?php echo htmlentities($surname); ?>" /> 
    </p> 
    <p><span>username</span> 
     <input width=150px id ="edUsername" name="edUsername" value="<?php echo htmlentities($username); ?>" /> 
    </p> 
    <p><span>password</span> 
     <input width=150px id ="edPassword" name="edPassword" value="<?php echo htmlentities($password); ?>" /> 
    </p> 
    <p><span>confirm password</span> 
     <input width=150px name="edConfirmPassword" /> 
    </p> 
    <p><span>security question 1</span> 
     <input width=150px name="edSecurityQuestion1" /> 
    </p> 
    <p><span>answer</span> 
     <input width=150px name="edSecurityAnswer1" /> 
    </p> 
    <p><span>security question 2</span> 
     <input width=150px name="edSecurityQuestion21" /> 
    </p> 
    <p><span>answer</span> 
     <input width=150px name="edSecurityAnswer2" /> 
    </p> 
    <p><span>security question 3</span> 
     <input width=150px name="edSecurityQuestion3" /> 
    </p> 
    <p><span>answer</span> 
     <input width=150px name="edSecurityAnswer3" /> 
    </p> 
    <p><span>company name</span> 
     <input width=150px name="edCompanyName" value="<?php echo htmlentities($companyName); ?>" /> 
    </p> 
    <p><span>address line 1</span> 
     <input width=150px name="edAddress1" value="<?php echo htmlentities($address1); ?>" /> 
    </p> 
    <p><span>address line 2</span> 
     <input width=150px name="edAddress2" value="<?php echo htmlentities($address2); ?>" /> 
    </p> 
    <p><span>address line 3</span> 
     <input width=150px name="edAddress3" value="<?php echo htmlentities($address3); ?>" /> 
    </p> 
    <p><span>city</span> 
     <input width=150px name="edCity" value="<?php echo htmlentities($city); ?>" /> 
    </p> 
    <p><span>county</span> 
     <input width=150px name="edArea" value="<?php echo htmlentities($area); ?>" /> 
    </p> 
    <p><span>post code</span> 
     <input width=150px name="edPostalCode" value="<?php echo htmlentities($postalCode); ?>" /> 
    </p> 
    <p><span>country</span> 
     <input width=150px name="edCountry" value="<?php echo htmlentities($country); ?>" /> 
    </p> 
    <p><span>telephone</span> 
     <input width=150px name="edTelephone" value="<?php echo htmlentities($telephone); ?>" /> 
    </p> 
    <p><span>fax</span> 
     <input width=150px name="edFax" value="<?php echo htmlentities($fax); ?>" /> 
    </p> 
    <p><span>e-mail</span> 
     <input width=150px name="edEmail" value="<?php echo htmlentities($email); ?>" /> 
    </p> 
    <p><span>website</span> 
     <input width=150px name="edWebsite" value="<?php echo htmlentities($website); ?>" /> 
    </p> 
    </div> 
</form> 

一個簡單的形式與一些修改。然後，我有處理調用PHP文件（Users_cntr.php）一些jQuery代碼，當用戶按下「註冊按鈕」：

$("#dialogForUser").dialog({ 
      autoOpen: false, 
      show: "blind", 
      hide: "explode", 
      buttons:[ 
           {text: "Register", click: function() { 
            $.ajax({url:Users_cntr.php ,success:function(result){$("button").html(result);}}); 
                              } 
           }, 
           {text: "Cancel", click: function() { $(this).dialog("close"); }}, 
          ] 
    }); 


    $("#openerForUser").click(function() { 
     var dialogWidth = $(this).attr('dialogWidth'); 
     var dialogHeight = $(this).attr('dialogHeight'); 

     $("#dialogForUser").dialog("option", "width", dialogWidth); 
     $("#dialogForUser").dialog("option", "height", dialogHeight); 
     $("#dialogForUser").dialog("open"); 
     return false; 
    }); 

你可以使用Ajax調用看到PHP文件被稱爲（我不得不承認我不明白它是如何工作的！）。

所有的PHP所做的就是創建一個新用戶並將其插入到數據庫中。我的問題是，我不知道如何將ui對話框的值傳遞給php文件。我想我需要做一些張貼，我嘗試使用過去建議的一些代碼，但沒有結果。

你有沒有試過在你的項目中做類似的事情？你能幫我嗎？

非常感謝你，

迪諾

Answer 1

您需要發送你想在你的按鈕處理程序提交資料：

$.post('Users_cntr.php', $('#target').serialize(), function(result){ 
    $("button").html(result); 
});   

這只是調用服務器上的PHP文件，但第二個「可選」參數是要發送的數據。在這種情況下，我們已經採取的形式與idtarget告訴jQuery的它需要serialized

我改變了你的$.ajax方法$.post，因爲它是同一件事的快捷方式幷包裝data-type和type性能。你可以在這裏閱讀更多： jQuery Post

Answer 2

如果你想與ajax傳遞數據，那麼你可以使用serialize()，即

$.ajax({ 
    url:'Users_cntr.php', 
    type:'post', 
    data: $("#target").serialize(), 
    success:function(result){ 
     $("button").html(result); 
    } 
}); 

然後從$_POST擷取您的數據php作爲

$edName=$_POST['edName']; 
$edSurname=$_POST['edSurname']; 

Answer 3

對不起，我爲自己的問題添加了一些筆記。

首先感謝大家的幫助，非常感謝。

我的代碼有另一個bug：它只提交一次。這是因爲您需要更改以下內容;

$(this).dialog("close"); 

與此：

$(this).dialog("destroy").remove(); 

恐龍