开发者

Filling the form area

I am having a PHP (HTML) page with 2 buttons.One button is used to get information(button 1) and the other button is used to submit the information(button 2).Both these buttons are linked to one form field called id.

when user enters the id and presses the get button(button 1) all the information about that id(name,age...) will be fetched from the database and will be displayed on the same html page(i used jquery for this).

button 2(submit) When the user wants to submit the information the user enters the id and details in the other form boxes(name,age.. form boxes) and then clicks submit button, all the information entered about the id will be submitted to database.

All the above stuff works fine for me and here is the snippet of the code i used.

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

Here is my QUESTION or PROBLEM

Only related to get button(button 1)

The information i am getting from the database using get button(button 1) is displayed at the bottom of the same html pa开发者_JAVA技巧ge, Instead what i want to do is the information fetched should be displayed in the respective form box i.e., when the user submits the id the information about the id like name and age should be displayed in the respective form boxes.(example name should be displayed in name: )

How can i do this? any suggestions or some good tutorials relating to the following will be highly appreciated.

Thanks for your time. John


This is not difficult. You will need to modify your PHP script to send JSON to the client. You will then need to insert the values from the received JSON into the form elements one by one. Example to get you started:

$("#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);

For clarity, I've modified your form elements' names:

<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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜