Using JavaScript to create a new row into a table, innerHTML to set a input variable but the user entered value won't post when submitted

Question

I have a table created that looks like this:

<form role="form" method="post" action="" enctype="multipart/form-data">
 <table class="table table-striped" id='billables'>
     <input type='hidden' name='products' id='products' value='0'>
        <thead>
           <tr>
              <th>Description</th>
              <th>Quantity (#)</th>
              <th>Rate ($)</th>
              <th>Amount ($)</th>
           </tr>
        </thead>

           <tbody >
             //The ROW gets inserted properly here, and each row gets 
               assigned a "input variable" properly
           </tbody>
  </table>
 </form>

and I am using a javascript function that when a button is clicked will add a new row to the table with input fields.

   function addRow() {
    var products = document.getElementById("products").value;
    products = parseFloat(products)
    products = products + 1;
    document.getElementById("products").value = products;

    var table = document.getElementById("billables");
    var row = table.insertRow(products);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    cell1.innerHTML = '<input class="form-control" id="'+products+'desc" type="text" name="'+products+'desc" required placeholder="Item Desc..." >';
    cell2.innerHTML = "<input class='form-control' id='"+products+"quant' type='number' name='"+products+"quant' required placeholder='Quantity...' >";
    cell3.innerHTML = "<input class='form-control' id='"+products+"rate' type='number' name='"+products+"rate' required step='0.01' placeholder='Ex: 23.99' onkeyup='calc()'>";
    cell4.innerHTML = "<input class='form-control' id='"+products+"amm' type='number' name='"+products+"amm' readonly >";
}

The "name" and "id" field get dynamically named based on how many rows exist in the table.

IE: 1desc for one row. 1desc,2desc for two rows etc...

The table populates properly, creates the new row, adds a input field for each cell and according to the google debugger/inspect the input fields are named properly.

My issue is that when the form is submitted that values of those elements generated using the innerHTML function do not post properly. Though all the other variables within the form are posted properly.

Any ideas?

edited for clarification - the missing ' was lost when making the post. and the form tag was place much earlier in the code added it to show what it looks like.

Edit:

Pic displaying what the table looks like before the new row is added

Displaying what the table looks like after the new row is added

Google dev tools indicating what the input variable looks like once generated (all correct)

According to google dev tools, other variables are getting posted but not the ones generated by the innerHTML function

Can you further explain what you mean by "do not post properly"? What have you noticed and how? Also, where is the form tag in your HTML? — sabithpocker
– sabithpocker, Commented Jan 9, 2019 at 6:03
Please don't destroy your question, if you feel your question no longer has merit then close, or vote to close, the question. — David Thomas
– David Thomas, Commented Jan 9, 2019 at 7:46

ellipsis · Accepted Answer · 2019-01-09 06:09:26Z

2

First there is no form tag. The following line has error.

<input type='hidden' name='products id='products' value='0'>

Change it to-

<input type='hidden' name='products' id='products' value='0'>

Due to the above

 var products = document.getElementById("products").value;

this line of code is not setting its value, and you are not able to post it.

answered Jan 9, 2019 at 6:09

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ellipsis Over a year ago

Please provide the full code associated with you problem and correctly

Collectives™ on Stack Overflow

Using JavaScript to create a new row into a table, innerHTML to set a input variable but the user entered value won't post when submitted

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related