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>©2012</p>
</footer>
</body>
</html>
Thank you very much in advance
