I have an input box "product" besides it there is an add input button which adds another input box product upon clicking.This array of input boxes I have created is through document.createElement('input'). My autocomplete is working for the initial input box....now when I click add Input button for the generated box also the autocomplete shld work...how do I make it work?? PS:Autocomplete script is working so I didnt post it here.... I just want it to make it working dynamically created i/p boxes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript" src="ajax-dynamic-list.js"></script> <link rel="stylesheet" href="../css/style.css" type="text/css" media="all" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Golden Collection </title> <style type="text/css"> #mainContainer{ width:660px; margin:0 auto; text-align:left; height:100%; background-color:#FFF; border-left:3px double #000; border-right:3px double #000; } #formContent{ padding:5px; } /* END CSS ONLY NEEDED IN DEMO */ /* Big box with list of options */ #ajax_listOfOptions{ position:absolute; /* Never change this one */ width:175px; /* Width of box */ height:250px; /* Height of box */ overflow:auto; /* Scrolling features */ border:1px solid #317082; /* Dark green border */ background-color:#FFF; /* White background color */ text-align:left; font-size:0.9em; z-index:100; } #ajax_listOfOptions div{ /* General rule for both .optionDiv and .optionDivSelected */ margin:1px; padding:1px; cursor:pointer; font-size:0.9em; } #ajax_listOfOptions .optionDiv{ /* Div for each item in list */ } #ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */ background-color:#317082; color:#FFF; } #ajax_listOfOptions_iframe{ background-color:#F00; position:absolute; z-index:5; } form{ display:inline; } </style> <script type="text/javascript" language="javascript"> function addRow1(id){ var tbody = document.getElementById (id).getElementsByTagName("TBODY")[0]; var row = document.createElement("TR") var td2 = document.createElement("TD") var tt2 = document.createElement('input') tt2.type = 'text' tt2.value = '' tt2.size = '45' tt2.name = 'prod_name[]' td2.appendChild (tt2) var td3 = document.createElement("TD") td3.setAttribute('align','left') var tt3 = document.createElement('input') tt3.type = 'button' tt3.value = 'Remove' tt3.name = 'bttn' tt3.onclick=function(){removeRowFromTable1(this);}; td3.appendChild (tt3) row.appendChild(td2); row.appendChild(td3); tbody.appendChild(row); } function removeRowFromTable1(obj){ var tbl = document.getElementById('exp1254911560'); var par=obj.parentNode; par=par.parentNode; var tt = par.rowIndex; tbl.deleteRow(par.rowIndex); } </script> </head> <body> <form name="form1" method="post"> <table width="98%" cellpadding="0" cellspacing="0" class="data-table"> <tr><td colspan="9"> <table id="exp1254911560"> <td width="31%">Product Name <span style="color:#FF0000"> * </span></td> <td><input type="button" name="add" value="Add Input" onClick="addRow1('exp1254911560')"></td> </tr> <tr> <td><h6> <input name="prod_name[]" type="text" size="45" onKeyUp="ajax_showOptions(this,'getname',event)" /> </h6></td> <td><input type="button" name="remove[]" value="Remove" onClick="removeRowFromTable1(this)" ></td> </tr> </table> </td> </tr> </table> </form> </body> </html> Code (markup):
I wouldnt do it that way - you will have all sorts of cross browser issues. What I would do is create a whole form with as many input boxes as a user might want and put each in a div with a unique id (say ibox2 to ibox50) then you can use CSS to hide all the boxes apart from the first. When the user clicks add then the javascript simply changes the css for the next box to reveal it.