填写表格区域

时间:2011-08-14 23:59:06

标签: php jquery

我有一个带有2个按钮的PHP(HTML)页面。一个按钮用于获取信息(按钮1),另一个按钮用于提交信息(按钮2)。这些按钮链接到一个表单字段叫做id。

当用户输入id并按下获取按钮(按钮1)时,将从数据库中获取有关该ID(名称,年龄...)的所有信息,并将显示在相同 html页面(我为此使用了jquery)。

按钮2(提交) 当用户想要提交信息时,用户在其他表格框(名称,年龄..表格框)中输入ID和详细信息,然后单击提交按钮,所有输入的有关该ID的信息将被提交给数据库。

以上所有内容对我来说都很合适,这里是我使用的代码片段。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
//get information from DB using script_1.php
$(document).ready(function(){
$("#button1").click(function(){
    $.post('script_1.php', { name: $('input[name$="name"]', '#myForm').val() },
        function(output) {
            $('#age').html(output).show();
        });
});
//submit info to DB using script_2.php
$("#button2").click(function(){
    $('form#myForm').attr({action: "script_2.php"});
    $('form#myForm').submit();
});
});

</script>
</head>
<body>
<form id="myForm" method="post">
id: <input type="text" name="name"/>
<input type="button" id="button1" value ="Get"/>
<input type="button" id="button2" value="Submit to script 2" />
name:<input type="text" name="title"/>
age:<input type="text" name="title"/>
</form>
<div id="age"></div>
</body>
</html>

以下是问题问题

仅与获取按钮(按钮1)相关

我使用get按钮(按钮1)从数据库获取的信息显示在同一个html页面的底部,而我想要做的是获取的信息应该显示在相应的表单框中,即用户提交id,关于id的信息,如姓名和年龄,应显示在相应的表格框中。(示例名称应显示在名称中:)

我该怎么做?任何有关以下内容的建议或一些好的教程都将受到高度赞赏。

感谢您的时间。约翰

1 个答案:

答案 0 :(得分:1)

这并不困难。您需要修改PHP脚本以将JSON发送到客户端。然后,您需要将接收到的JSON中的值逐个插入到表单元素中。帮助您入门的示例:

$("#button1").click(function(){
    $.post('script_1.php', { id: $('input[name="id"]', '#myForm').val() },
        function(json) {
            $("input[name='name']").val(json.name);
            $("input[name='age']").val(json.age);
        }, "json");
});

PHP:

$data = array('name' => 'Jeff', 'age' => '28');
echo json_encode($data);

为清楚起见,我修改了表单元素的名称:

<form id="myForm" method="post">
id: <input type="text" name="id"/>
<input type="button" id="button1" value ="Get"/>
<input type="button" id="button2" value="Submit to script 2" />
name:<input type="text" name="name"/>
age:<input type="text" name="age"/>
</form>