Javascript adds another line suitable for a unique identifier showing the NAN value for the identifier

Question

I have an html table. Inside that my markup looks like this

<table id="invoices-product-detail"> <tbody id="tableToModify"> <?php $i=1; while($i<2){ ?> <tr> <td> <input type="hidden" name="prdid[]" id="prd_id<?php echo $i; ?>" /> </td> <td> <input type="text" name="prdcost[]" id="prd_cost<?php echo $i; ?>" value="0" disabled="disabled" style="color:#333;" /> </td> <td> <input type="text" name="prdquentity[]" id="prd_quentity<?php echo $i; ?>" tabindex="<?php echo 3+($i*5);?>" onKeyUp="calprice1(this.value,'<?php echo $i; ?>');" value="1" /> </td> <td> <input type="text" name="prddamount[]" tabindex="<?php echo 5+($i*5);?>" readonly="true" id="prd_damount<?php echo $i; ?>" onKeyUp="calprice2(this.value,'<?php echo $i; ?>');" /> </td> <td id="readonly"> <input readonly="readonly" name="prdprice[]" id="prd_price<?php echo $i; ?>" value="0" /> </td> </tr> <?php $i++; } ?> </tbody> </table><!--#invoices-product-detail--> 

Now under that there is a button called add new line

 <input type="button" onClick="createRow();" value="Add a new line"></span> 

In js file I have createRow() function , like this

 function createRow() { var newlineno = document.forms[0].elements["prdprice[]"].length; newlineno++; var row = document.createElement('tr'); var col1 = document.createElement('td'); var col2 = document.createElement('td'); var col3 = document.createElement('td'); var col4 = document.createElement('td'); var col5 = document.createElement('td'); var col6 = document.createElement('td'); var col7 = document.createElement('td'); row.appendChild(col1); row.appendChild(col2); row.appendChild(col3); row.appendChild(col4); row.appendChild(col5); row.appendChild(col6); row.appendChild(col7); col1.innerHTML = "<input type=\"hidden\" name=\"prdid[]\" id=\"prd_id"+newlineno+"\" /><input type=\"text\" name=\"prdname[]\" id=\"prd_name"+newlineno+"\"; col2.innerHTML = "<input type=\"text\" disabled=\"disabled\" name=\"prddesc[]\" id=\"prd_desc"+newlineno+"\" />"; col3.innerHTML = "<input type=\"text\" disabled=\"disabled\" name=\"prdcost[]\" id=\"prd_cost"+newlineno+"\" value=\"0\" />"; col4.innerHTML = "<input type=\"text\" name=\"prdquentity[]\" id=\"prd_quentity"+newlineno+"\" onKeyUp=\"calprice1(this.value,'"+newlineno+"');\" value=\"1\" />"; col5.innerHTML = "<select name=\"prddtype[]\" class=\"discount-type\" id=\"prd_dtype"+newlineno+"\" >"+document.getElementById("prd_dtype0").innerHTML+"</select>"; col6.innerHTML = "<input type=\"text\" name=\"prddamount[]\" id=\"prd_damount"+newlineno+"\" onKeyUp=\"calprice2(this.value,'"+newlineno+"');\" />"; col7.innerHTML = "<input type=\"text\" name=\"prdprice[]\" id=\"prd_price"+newlineno+"\" class=\"price-input-text\" disabled=\"disabled\" value=\"0\" />"; var table = document.getElementById("tableToModify"); // find table to append to table.appendChild(row); // append row to table } 

Now everything is all right. By js, I can easily add another line. But when I checked the identifier of the input fields, I saw that the first line (by default) shows <input type="text id="prd_name1"> which one is fine. But when I clicked to add a new line, and a new one the generated line identifier was <input type="text" id="prd_nameNaN"> . But here I want the identifier to be <input type="text" id="prd_name2"> and for the third line <input type="text" id="prd_name3"> , for example, the case. Here, for each newly created line the number of lines will be added to each identifier field. There may be someone kindly tell me why this question zdes ? Any help and suggestions are very noticeable. Thanks

Answer 1

document.forms[0].elements["prdprice[]"] will return only one DOM element if there is only one instance on the page, so calling .length in this case will return undefined :

 var newlineno = document.forms[0].elements["prdprice[]"].length; // Undefined newlineno++; // NaN 

Use querySelectorAll instead:

 var newlineno = document.querySelectorAll("[name='prdprice[]']").length 

See this script demonstrating three inputs: http://jsfiddle.net/Blade0rz/3Eyba/

And this daemon demonstrates one: http://jsfiddle.net/Blade0rz/kqakC/

Answer 2

It looks like the variable newlineno not a number, which means NaN . make sure the following line creates the actual number:

 var newlineno = document.forms[0].elements["prdprice[]"].length; newlineno++; console.log(newlineno); // open Firefox' Firebug or a similar tool to see the output of this variable 

Answer 3

All you have to do id is add the parseInt () function around the newlineno variable to convert it to an integer value. I had the same problem and it was solved like this

var size = parseInt (document.getElementById (disease + "members").))

and probably you should use .value instead of .length

Example: var newlineno = parseInt (document.getElementById ("prdprice").))

or make some changes to the example above and it might work for you.