I have a html table. Inside that my markup is like this: Now under that I have a button called Add a new line: in js file I have the createRow() function like this Now here everything is fine. As per js I can easily add another row. But when I checked the id of input fields I saw that

JavaScript add another row in atable for unique id showing NAN value for id

I have a html table. Inside that my markup is 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 I have a button called Add a new line:

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

in js file I have the 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 here everything is fine. As per js I can easily add another row. But when I checked the id of input fields I saw that the first row (default one) is showing <input type="text id="prd_name1"> which one is fine. But when I clicked to the add a new line and the new created line id was <input type="text" id="prd_nameNaN">. But here I want the id should be like <input type="text" id="prd_name2"> and for 3rd row <input type="text" id="prd_name3"> like so on. Here for every new created row the number of row will be added to every field id. Here can someone kindly tell me why this issue is here? Any help and suggestions are highly appreciable.

Answer

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

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

Use querySelectorAll if possible instead:

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

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

And this one demonstrating one: http://jsfiddle.net/Blade0rz/kqakC/

Advertisement

Answer