Using jquery to displaying query results in a form
A friend recently introduced me to jquery and now I'd like to use it rewrite and develop a inventory web application.
My original app consisted of a simple web page that required you to enter an id number and click a button. The id number is passed to a php file via the post method. The php file queries a database and displays the results in a table.
I created a HTML form that I would like to use update, enter new records, and display query results based on the button pressed.
At this time I want to display query results.
I have figured out how to use jquery to display the results of a query in a div at the bottom of my form. what I need help with is how if display the results in given location of the form.
Here is a real simple example of what I want:
HTML
<html>
< head>
< title>JQuery test< /title>
< /head>
< body>
< form>
< table>
< tr>< th>Equipment ID< /th>
< t开发者_Go百科d>< input type="text name="eqid" id="eqid" />< /td>
< th>Manufacturer< /th>
< td>< input type="text name="manuf" id="manuf" />< /td>
< th>Model< /th>
< td>< input type="text name="model" id="model" />< /td>< tr>
< /table>
< div id=output> < /div>
< /form>
< /body>
< /html>
JQUERY
$("#submit_btn").click(function()
{
var data = $('form:first').serialize();
$.ajax(
{
url:"passdata.php",
type: "POST",
data:data,
success:function(data)
{
$("#output").html(data);
} //end success
}); // end ajax
}); // end click
This what I'm using on my php file
PHP
<?php
$eqid = $_POST['eqid'];
$manuf = 'Apple';
$model ='IPAD 2';
echo "<table border=0><tr>";
echo "<th align ='left'>Manufacturer</th><td><input name='manuf' id='manuf' type='text' size='10' value=" . $manuf . "></td></tr>";
echo "<tr><th align ='left'>Surveyed by</th><td><input name='model' id='model' type='text' value=". $model . "></td></tr></total>";
?php>
I would like the results of the query (manufacture and model) to be displayed in the appropriate location of the form in the example above.
Any suggestion would be greatly appreciated.
Chris
passdata.php needs to do your database querying then return the data. JSON is a nice way of doing this.
<?php
$iteminfo = array('id' => $id, 'manuf' => $manuf, 'model' => $model);
echo json_encode($iteminfo);
?>
your ajax call then needs to take this data and populate your form.
$("#submit_btn").click(function()
{
var data = $('form:first').serialize();
$.ajax(
{
url:"passdata.php",
type: "POST",
dataType: 'json',
data:data,
success:function(data)
{
$("eqid").val(data.id);
$("manuf").val(data.manuf);
$("model").val(data.model);
} //end success
}); // end ajax
}); // end click
Of course if you're using the same form for all CRUD operations, your php is going to have to be just as sneaky as your javascript. You sure this is a good idea for you?
加载中,请稍侯......
精彩评论