SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    php auto complete from database

    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

  2. #2
    SitePoint Addict Shaydez's Avatar
    Join Date
    Jul 2006
    Location
    Boca Raton, Florida
    Posts
    356
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    can you be a bit more specific? you want to to take whats in the input text field and put it into a database?
    Sr. Website Developer and Internet Marketing
    www.CarlosJa.com Note: If anyone
    needs to get ahold of me please feel free to email me through
    my site. Apparently i missed quite a few private messages.

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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();
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •