Question 296261 in Html Question posted in
Some basic documentation can be found here.

Html – Inputs reset after making copy of row

Im trying to do a copy of a row to add another line of inputs but every time i click the button the value of every input resets.

Here is what ive written so far:

<div style="margin-left: 2em;margin-right: 2em;">
            <table class="table table-bordered">
                <thead>
                  <tr>
>!                   th`s
                  </tr>
                </thead>
                <tbody id="aditional">
                  <tr id="template">
>!                    inputs and blank td`s
                  </tr>
                  <script>

                    const temp = document.getElementById("template").innerHTML;
                    const adit = document.getElementById("aditional");

                    function add() {
                        adit.innerHTML+='<tr>'+temp+'</tr>';
                        renum();
                    }

                    function renum() {
                        const lp = document.getElementsByClassName("lp"); 
                        for(let i=0;i<lp.length;i++) {
                            lp[i].innerHTML = i+1;
                        }
                    }
                    
                  </script>
                </tbody>
              </table>
              <button class="btn btn-success" type="button" onclick="add()">Dodaj</button>
        </div>

Ive tried:
const temp = (document.getElementById("template").innerHTML).toString()

Tags:

2

Answers


  1. 0

    To prevent the input values from resetting, you should avoid directly manipulating the innerHTML, which causes the inputs to lose their values.

    <div style="margin-left: 2em; margin-right: 2em;">
    <table class="table table-bordered">
        <thead>
            <tr>
                <!-- Your table headers -->
                <th>Column 1</th>
                <th>Column 2</th>
                <!-- Add more headers as needed -->
            </tr>
        </thead>
        <tbody id="additional">
            <tr id="template">
                <!-- Your template row with inputs -->
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control"></td>
                <!-- Add more columns with inputs as needed -->
            </tr>
        </tbody>
    </table>
    <button class="btn btn-success" type="button" onclick="addRow()">Add Row</button>

    <script>
        function addRow() {
            const templateRow = document.getElementById("template");
            const tableBody = document.getElementById("additional");

            // Clone the template row
            const newRow = templateRow.cloneNode(true);
            
            // Clear input values in the cloned row if needed
            const inputs = newRow.getElementsByTagName('input');
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].value = ''; // Reset input values if needed
            }

            // Append the cloned row to the table
            tableBody.appendChild(newRow);
            
            // Recalculate any numbering or other operations needed
            renumerateRows();
        }

        function renumerateRows() {
            const rows = document.getElementById("additional").getElementsByTagName('tr');
            for (let i = 0; i < rows.length; i++) {
                // Update row numbers or perform other operations as needed
                // For example, if you have a row numbering column (change "lp" to your specific class)
                const rowNumber = i + 1;
                rows[i].querySelector('.lp').innerHTML = rowNumber;
            }
        }
    </script>
</div>
    Login or Signup to reply.
  2. 0

    You should use insertAdjacentHTML instead of innerHTML. It’s even clearly stated on the official documentation there:

    To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML().

    That said, you can’t use innerHTML on table rows:

    function showValues() {
    const div = document.getElementById('div');
  const divInnerHTML = div.innerHTML;
  
  const tr = document.getElementById('tr');
  const trInnerHTML = tr.innerHTML;
  
  console.log("Div innerHTML: "+divInnerHTML);
  console.log("Tr innerHTML: "+trInnerHTML);
}
    <div id="div">
  <input type="text">
</div>
<table>
  <tr id="tr">
    <input type="text">
  </tr>
</table>

<button onclick="showValues()">
Show
</button>

    As you see, the div returns its innerHTML just fine. The table row does not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search