Dynamic form & autocomplete

Javascript coding ..

Moderators: macek, egami, gesf

tuxman
New php-forum User
New php-forum User
Posts: 2
Joined: Thu Feb 16, 2012 2:56 am

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

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
.error{
   border: 2px solid red;
   background-color: #FFFFD5;
   margin: 0px;
   color: red;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<!-- autocomplete  -->
<script type="text/javascript">
function lookup(inputString) {
    if(inputString.length == 0) {
        // hide the list
        $('#suggestions').hide();
    } else {
        $.post("autoc.php" , {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });


    }
} // lookup

function fill(thisValue) {
    $("input[name^='inputString']").val(thisValue);
    $('#suggestions').hide();
}

</script>
<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() {
        current++;
        /* 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);
            $currentElem.attr("name",$currentElem.attr("name")+current);
            $currentElem.attr("id",$currentElem.attr("id")+current);

        });
        var f = $("#fieldSet"+current);
        f.html(f.html().replace("fieldSetID", "fieldSet"+current));
        $neweducation.appendTo("#mainField");
        $neweducation.removeClass("hideElement");
        //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");
      $("#count").attr("value",prevvalue+","+current);

    });
    $("#demoForm").validate({
        errorPlacement: function(error, element) {
             $(element).attr("class","error");
             //error.insertAfter(element);
         },
        rules: {

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

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

<style>
.hideElement {display:none;}
 </style>
</head>

<body>

<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">
<p>
    <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>
         </div>
    <label for="cel" style="width:80px;text-align:left;color:#6699FF;font-weight:bold;">Celule:</label>

</p>

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

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

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

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

                             <label for="cel1">Celule:</label>
                           
                        </div>
                        <!-- /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>
                        </div>
                        <!-- /Add Button -->

                    </div>
                    <!-- / Dynamic Form -->


                </div>

            </fieldset>

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




        </form>
        </div>



</div>
</div>



<footer>
    <p>&copy;2012</p>
</footer>

</body>

</html>



Thank you very much in advance

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

Re: Dynamic form & autocomplete

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

Usefull Code


Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 1 guest