We Keep Coding

jQuery autocomplete not working for multiple text inputs

I have the issue that autocomplete on works for the first textbox, but not for the other ones that I can add via a button. Here's my code:
HTML:
<input class="button" type="button" value="+" onclick="addRow('positionen')" />
<input class="button" type="button" value="-" onclick="deleteRow('positionen')" />
<table id="positionen">
<tr>
<td><input type="checkbox" name="chk[]" /></td>
<td><input class="ui-widget" type="text" name="text[]" placeholder = "Text" /></td>
<td><input type="text" name = "val[]" placeholder = "Val" /></td>
</tr>
</table>
Function addRow:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}
Function deleteRow:
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Can't delete all rows");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch(e) {
alert(e);
}
}
Autocomplete code:
$(function() {
$(".ui-widget").focusin(function(){
$(this).autocomplete({
source: 'search.php'
});
});
});
The first textbox that is already on the page by default is working fine with autocomplete. However when I add a textbox with the button, autocomplete is not working for this textbox.

Events are bind to the html when page is loaded, new rows are not there, you just need to bind it to the created rows by simply adding this to your addRow function
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
if (newcell.childNodes[0].className === 'ui-widget ui-autocomplete-input') {
$(newcell.childNodes).autocomplete({
source: 'search.php'
});
}
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}

chosen selecting previous value in new element

I am using chosen plugin and when i add row in html table dynamically ,new select box comes with previous value and becomes not editable. I know problem is caused by having same id's of select boxes but i cant change id because it will effect functionality of my application.Please help!!
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}

use html5 "data" attribute, get a look at documentation here :
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
jquery functon doc page here :
https://api.jquery.com/data/
Good luck :)

Javascript code for adding rows in a table copies the data in the cell to new row

I am making a form that will be used in Internet Explorer. I have a table that has the capability to add rows dynamically. However, when you click the add row button it copies all of the data in the cell to the new row.
Anyone know a trick for this. Chrome works just fine.
<table id="divDocument" class="tftable" border="1">
<tr>
<td style="width:20px;"><INPUT type="checkbox" name="chk" /></td>
<td style="width:150px;"> <textarea id="txtDocument" class="textarea required" alt="Document/Item/Process" title="Document/Item/Process" style="border: none; width: 100%; height:100%;"></textarea></td>
</table>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
if(rowCount<=6){
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].innerHTML = "";
break;
case "text":
newcell.childNodes[0].value = "";
break;
case "text":
newcell.childNodes[0].value = "";
break;
case "text":
newcell.childNodes[0].value = "";
break;
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
} else{alert("Please submit another CCR with remaining items. Thanks!");}
}

You need to add textarea type and loop with your variable i:
<script>function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
if(rowCount<=6){
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[i].type) {
case "text":
newcell.childNodes[i].innerHTML = "";
break;
case "textarea":
newcell.childNodes[i].value = "";
break;
case "text":
newcell.childNodes[i].value = "";
break;
case "text":
newcell.childNodes[i].value = "";
break;
case "text":
newcell.childNodes[i].value = "";
break;
case "checkbox":
newcell.childNodes[i].checked = false;
break;
case "select-one":
newcell.childNodes[i].selectedIndex = 0;
break;
}
}
} else{alert("Please submit another CCR with remaining items. Thanks!");}
}</script>

I need to dynamically add more fields to a form and have the new fields inputs values change as well

I have a jsfiddle here of the script I'm using to dynamically add rows to a field but have a problem.
On my form I have the 1st row that I want to duplicate with the script. The row consists of 6 inputs named job_date1, tech_name1, cost_code1, pay_rate1, total_hours1, and sub_total1.
When the second row is created via the script I now need the new rows input names to be set by the script if possible to job_date2, tech_name2, cost_code2 and so on and with each new row created I need the end digit to move up one.
Here is the code:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null !== chkbox && true === chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
catch(e) {
alert(e);
}
}

Here's a simple solution:
newcell.children[0].name = newcell.children[0].name + rowCount;
As you count each newly added row, add that variable to each of the input elements.
Here's the jsFiddle (be sure to check your console when you run the function to see the console log).
For the first log, it returns:
chk1
txt1
tech_name1
cost_code1
txt1
For the second element that's created
chk2
txt2
tech_name2
cost_code2
txt2
etc.

I have a simpler suggestion. Instead of having job_date1, job_date2, etc., name your fields job_date[] (all of the job date fields).
E.g. PHP automatically recognizes this and $_POST["job_date"] would be an array with all the values for job date in the order they appear on the html page. So instead of $_POST["job_date" . $i] you would use $_POST["job_date"][$i].
I don't know what technology you use for the backend, but I'm sure you can achieve the same effect.
It will be more robust and elegant and you don't have to care about re-numbering when you add nor remove rows.
Edit: More details about this technique in PHP can be found in PHP FAQ and Example #3 here.

Javascript add table in html page

I have an html page which includes a table. The following Javascript code a new table to my html page under the table that already exists each time I press the add new button. How can I modify this code so that the user will be able to add only 10 tables?
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
</SCRIPT>