i have an auto complete form built with jquery and php and is working well but can someone help on how to insert the populated result into database
can you be a bit more specific? you want to to take whats in the input text field and put it into a database?
yes …dis is a bit of my code
my html page
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>jQuery AutoComplete tutorial using multiple input boxes</title>
<style type="text/css" title="currentStyle">
@import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
@import"css/layout-styles.css" ;
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- jQuery libs -->
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<!-- Our jQuery Script to make everything work -->
<script type="text/javascript" src="js/jq-ac-script.js"></script>
<link href=“…/main.css” rel=“stylesheet”>
</head>
<body>
<div id=“main” align=“center”>
<?php include_once(“…/template_header.php”);?>
<div id=“content”>
<section>
<div class=“panel”>
<form action=“register.php” method=“POST” id=“itemsForm” >
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Course Code</th>
<th>Course Description</th>
<th>Course Unit</th>
</tr>
</thead>
<tbody>
<tr class="item-row">
<td></td>
<div align="center" ><img src="../images/COURSE.png"/></div>
<td><input name="courseCode[]" value="" class="tInput" size="10" id="courseCode" tabindex="1" type="text"/> </td>
<td><input name="courseDesc[]" size="50" class="tInput" id="courseDesc" value="" readonly="readonly" /></td>
<td><input name="courseUnit[]" value="" class="tInput" id="courseUnit" size="5" readonly /> </td>
<td><input type="hidden" name="std_id"></td>
</tr>
</tbody>
</table>
</form>
<a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Add Course</span></a>
</div>
<input name="sumit" type="submit">
the php page
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>jQuery AutoComplete tutorial using multiple input boxes</title>
<style type="text/css" title="currentStyle">
@import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
@import"css/layout-styles.css" ;
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- jQuery libs -->
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<!-- Our jQuery Script to make everything work -->
<script type="text/javascript" src="js/jq-ac-script.js"></script>
<link href=“…/main.css” rel=“stylesheet”>
</head>
<body>
<div id=“main” align=“center”>
<?php include_once(“…/template_header.php”);?>
<div id=“content”>
<section>
<div class=“panel”>
<form action=“register.php” method=“POST” id=“itemsForm” >
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Course Code</th>
<th>Course Description</th>
<th>Course Unit</th>
</tr>
</thead>
<tbody>
<tr class="item-row">
<td></td>
<div align="center" ><img src="../images/COURSE.png"/></div>
<td><input name="courseCode[]" value="" class="tInput" size="10" id="courseCode" tabindex="1" type="text"/> </td>
<td><input name="courseDesc[]" size="50" class="tInput" id="courseDesc" value="" readonly="readonly" /></td>
<td><input name="courseUnit[]" value="" class="tInput" id="courseUnit" size="5" readonly /> </td>
<td><input type="hidden" name="std_id"></td>
</tr>
</tbody>
</table>
</form>
<a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Add Course</span></a>
</div>
<input name="sumit" type="submit">
and my javascript page
$(document).ready(function(){
// Use the .autocomplete() method to compile the list based on input from user
$('#courseCode').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
var $itemrow = $(this).closest('tr');
// Populate the input fields from the returned values
$itemrow.find('#courseCode').val(ui.item.courseCode);
$itemrow.find('#courseDesc').val(ui.item.courseDesc);
$itemrow.find('#courseUnit').val(ui.item.courseUnit);
// Give focus to the next input field to recieve input from user
return false;
}
// Format the list menu output of the autocomplete
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.courseCode + " - " + item.courseDesc + "</a>" )
.appendTo( ul );
};
// Get the table object to use for adding a row at the end of the table
var $itemsTable = $('#itemsTable');
// Create an Array to for the table row. ** Just to make things a bit easier to read.
var rowTemp = [
'<tr class="item-row">',
'<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
'<td><input name="courseCode[]" class="tInput" value="" id="courseCode" size="10" type="text" /> </td>',
'<td><input name="courseDesc[]" class="tInput" value="" id="courseDesc" readonly="readonly" size="50"/></td>',
'<td><input name="courseUnit[]" class="tInput" value="" id="courseUnit" size="5" /></td>',
'</tr>'
].join('');
// Add row to list and allow user to use autocomplete to find items.
$("#addRow").bind('click',function(){
var $row = $(rowTemp);
// save reference to inputs within row
var $courseCode = $row.find('#courseCode');
var $courseDesc = $row.find('#courseDesc');
var $courseUnit = $row.find('#courseUnit');
if ( $('#courseCode:last').val() !== '' ) {
// apply autocomplete widget to newly created row
$row.find('#courseCode').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
$courseCode.val(ui.item.courseCode);
$courseDesc.val(ui.item.courseDesc);
$courseUnit.val(ui.item.courseUnit);
// Give focus to the next input field to recieve input from user
return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.courseCode + " - " + item.courseDesc + "</a>" )
.appendTo( ul );
};
// Add row after the first row in table
$('.item-row:last', $itemsTable).after($row);
$($courseCode).focus();
} // End if last courseCode input is empty
return false;
});
$('#courseCode').focus(function(){
window.onbeforeunload = function(){ return "You haven't saved your data. Are you sure you want to leave this page without saving first?"; };
});
}); // End DOM
// Remove row when clicked
$("#deleteRow").live('click',function(){
$(this).parents('.item-row').remove();
// Hide delete Icon if we only have one row in the list.
if ($(".item-row").length < 2) $("#deleteRow").hide();
});