在jquery对话框中提交表单

时间:2012-09-30 15:43:26

标签: php jquery ajax user-interface dialog

我知道之前已经问过这个问题,但解决方案似乎都不适合我。

我在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>

一个编辑很少的简单表单。然后我有一些jquery代码调用一个php文件(Users_cntr.php)进行处理,当用户按下&#34;注册按钮&#34;:

$( "#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文件。我假设我需要做一些帖子,我尝试使用过去建议的一些代码,但没有结果。

你有没有尝试在你的项目中做类似的事情?你能帮忙吗?

非常感谢,

恐龙

3 个答案:

答案 0 :(得分:1)

您需要在按钮处理程序中发送要提交的数据:

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

这只是在服务器上调用你的php文件,但第二个“可选”参数是要发送的数据。在这种情况下,我们已将您的表单与id target一起使用,并告诉jQuery它需要serialized

我将$.ajax方法更改为$.post,因为它是同一事物的快捷方式,并包含data-typetype属性。你可以在这里阅读更多: jQuery Post

答案 1 :(得分:1)

如果您想使用ajax传递数据,则可以使用serialize(),即

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

然后将php中的数据从$_POST恢复为

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

答案 2 :(得分:0)

很抱歉,我正在为自己的问题添加一些注释。

首先感谢大家的帮助,非常感谢。

我的代码有另一个错误:它只提交一次。这是因为您需要更改以下内容;

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

用这个:

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

恐龙