在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(); 

恐龙