Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

Dynamic form & autocomplete

Javascript coding ..

Moderators: macek, egami, gesf

Dynamic form & autocomplete

Postby tuxman » Thu Mar 29, 2012 4:09 am

Hello !

I have a dynamic form with 2 input fields: first with autocomplete, second simple.
My problem is: why didn't work autocomplete ?
My code is:

Code: Select all
   border: 2px solid red;
   background-color: #FFFFD5;
   margin: 0px;
   color: red;
<script src="js/jquery.js" type="text/javascript"></script>
<!-- autocomplete  -->
<script type="text/javascript">
function lookup(inputString) {
    if(inputString.length == 0) {
        // hide the list
    } else {
        $.post("autoc.php" , {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {

} // lookup

function fill(thisValue) {

<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jtip.js" type="text/javascript"></script>
<!-- dynamic form -->
<script type="text/javascript">
var current= 1;
$(document).ready(function() {
    $("#addeducation").click(function() {
        /* GWF - Modified the line below */
        $neweducation= $("#userTemplate").clone(true).removeAttr("id").attr("id", "fieldSet" + current).insertBefore("#userTemplate");
        $neweducation.children("p").children("input").each(function(i) {
            var $currentElem= $(this);

        var f = $("#fieldSet"+current);
        f.html(f.html().replace("fieldSetID", "fieldSet"+current));
        //add validation
        $("#cel"+current).rules("add", { required:true,minlength:1 });
        $("#x"+current).rules("add", { required:true,minlength:1 });
      $("#y"+current).rules("add", { required:true,minlength:1 });
      var prevvalue=$("#count").attr("value");

        errorPlacement: function(error, element) {
        rules: {

            cel1: {
                required: true,
                minlength: 1
            ,x1: {
                required: true,
         ,y1: {
                required: true,
/* GWF - Add function to remove education */
function removeeducation(id) {
   var fieldid=id.replace("#fieldSet","");
   var prev=$("#count").attr("value");
   var finalids=prev.replace(","+fieldid,"");

<!-- datapicker -->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
   <script type="text/javascript">
             $("#data").datepicker({ showOn: 'button', dateFormat: "yy-mm-dd", buttonImageOnly: true, buttonImage: 'css/images/calendar.gif' });

.hideElement {display:none;}


<a href="index.php"><img src="images/HomeIcon.png" width="48" height="48" alt="" /></a>
<!-- The Part from Form hwo change; hide initial; show when push "Add" -->
<div id="person_phones_template" class="template">
<div id="userTemplate" class="hideElement">
    <label for="inputString" style="width: 80px;text-align:left;color:#6699FF;font-weight:bold;">Specie:</label>
     input size="30" id="inputString" name="inputString" onkeyup="lookup(this.value);" type="text" /><br />
        <div class="suggestionsBox" id="suggestions" style="display:none;position:relative;left:110px;margin: 5px 0px 0px 0px;width: 200px;background-color: #212427;border: 2px solid #000;color: #fff;">
                <div class="suggestionList" id="autoSuggestionsList" style=" margin: 0px;padding: 0px;"></div>
    <label for="cel" style="width:80px;text-align:left;color:#6699FF;font-weight:bold;">Celule:</label>


<div id="person_phones_controls" class="controls" style="background-color:#f3f2f2;border-top: 1px solid #d1d1d1;padding: 10px;overflow: hidden;width:205px;">

<div id="person_phones_add" class="btn form add"><a href='#' onClick='removeeducation("#fieldSetID"); return false;'><span style="background:url(images/delete.png) no-repeat left center;font-weight:bold;color:#3C8411;">Delete</span></a></div>

<!--/The Part from Form hwo change -->

<div id="content">
       <div id="primary">

        <div class="asp">
        <form name="demoForm" id="demoForm" method="post" action="newtable.php" class="blockStyledForm">
            <div class="title">Creare Tabel Nou</div>

            <fieldset id="mainField">

                <div class="legend">Date Generale</div>

                  <div class="field">
                    <label for="data">Data:</label>
                    <input type="text" id="data" name="data" size="30"/>

                <div class="field">
                <label for="adancime">Adancime:</label>
                <input type="text" id="adancime" name="adancime" size="30"/>

                 <div class="field">
                    <div class="legend">Date Specie</div>
                     <!-- Dynamic Form -->
                    <div id="person_phones" class="embed">

                        <!-- The default part of Form-->
                        <div id="person_phones_template" class="template">

                            <label for="inputString1">Specie:</label>

                              <input size="36" id="inputString1" onkeyup="lookup(this.value);" name= "inputString1" type="text" /><br />
                                 <div class="suggestionsBox" id="suggestions" style="display: none;">
                                      <div class="suggestionList" id="autoSuggestionsList"></div>

                             <label for="cel1">Celule:</label>
                        <!-- /The default part of Form-->

                        <!-- Add Button -->
                        <div id="person_phones_controls" class="controls">
                            <div id="person_phones_add" class="btn form add" id="addeducation"><a id="addeducation"><span>Add</span></a></div>
                        <!-- /Add Button -->

                    <!-- / Dynamic Form -->



            <div class="actions">
            <input type="hidden" name="count" value="1" id="count"/>
                <div class="btn form accept"><a href="javascript:document.demoForm.submit();"><span>Salveaza</span></a></div>
                <div class="btn form cancel"><a href="javascript:document.demoForm.reset();"><span>Anuleaza</span></a></div>






Thank you very much in advance
New php-forum User
New php-forum User
Posts: 2
Joined: Thu Feb 16, 2012 2:56 am

Re: Dynamic form & autocomplete

Postby testforum » Sat Mar 31, 2012 4:21 am

Usefull Code
New php-forum User
New php-forum User
Posts: 1
Joined: Sat Mar 31, 2012 4:03 am

Return to JavaScript

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.