Dynamically Javascript to increase the value of checkbox

Question

I'm having trouble increasing the value of the checkbox automatically which is sitting inside a table. So, in short, In my HTML table, I have text boxes and a checkbox present as a row(default 5 rows are shows when the webpage is loaded). I have a button that calls below javascript to automatically clone a row, if anytime end-user wants to add more rows to this existing default 5 rows HTML table.

<script type="text/javascript">
function cloneRow() {
      var table = document.getElementById("tableToModify"); // find table to append to
      var row = document.getElementById("rowToClone");
      var clone = row.cloneNode(true); // copy children too
      clone.id = "newID"; // change id or other attributes/contents
      table.appendChild(clone); // add new row to end of table
    }

// This function deletes a row when clicked on the button
function deleteRow(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
}

Now in my HTML, the checkbox looks like this : PS: The value "3" indicates rows number, so here in this example this checkbox is located in 3rd rows.

<tr id="rowToClone">
        <td id="Transportation_Type">
            <select id="Transportation_Type" onChange="checkOption(this)" name="transportation_type">
                {% for type in transportation_type %}
                <option value="{{ type.type }}">{{ type.type }}</option>
                {% endfor %}
            </select>
        </td>
        <td><input type="text" id="License_Plate" name="License_Plate" placeholder="Optional" style="text-align:center;" disabled></td>
        <td><input id="checkbox" type="checkbox" name="Electric" value="3"/></td>
        <td id="Number of days per week" >
            <select name="DaysPerWeek">
                <option selected>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </td>
        <td><input type="number" name="DistanceInKm" style="text-align:center;" ></td>
        <td><button class="button is-danger "  onclick="deleteRow(this)">Delete Row</button></td>
    </tr>

So now my question is when clicking the clone button, how a new row will get the next value in the checkbox?

Let's say the end-user clicks a one-time clone button, then the checkbox along with others will be clone but only the value of checkbox should be "6" automatically.

You should check the id of the elements in your DOM because ids are for identification and there should not be elements with the same id — Dani
– Dani, Commented Jul 10, 2021 at 9:49

Barmar · Accepted Answer · 2021-07-10 09:38:14Z

1

Get the number of rows in the table. Add 1 to that to get the appropriate value for the checkbox.

function cloneRow() {
  var table = document.getElementById("tableToModify"); // find table to append to
  var row = document.getElementById("rowToClone");
  var clone = row.cloneNode(true); // copy children too
  clone.id = "newID"; // change id or other attributes/contents
  var rows = table.querySelectorAll("tr").length;
  clone.querySelector("input[type=checkbox]").value = rows+1;
  table.appendChild(clone); // add new row to end of table
}

If there's a header row in the table that shouldn't be counted, don't add 1.

answered Jul 10, 2021 at 9:38

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

4 Comments

change198 Over a year ago

this is exactly what I expected, Thanks. However, It also clones the values selected as well. let's say I have chosen the values in my html table, now I click the clonebutton, this replicates the rows with checkbox value as row+1 but it at the same time copies the filled-in values from the textboxes. Is it possible to clone the rows but without filledin values to copied over other than the checkbox? It should clone empty set of rows .

Barmar Over a year ago

you should clone a template, not one of the rows that are in use.

change198 Over a year ago

Thanks. I'm not great at JS, could you assist me to create one or help me to read and proceed?

Barmar Over a year ago

Use the <template> tag, and put rowToClone in there, not in the real ltable.

Collectives™ on Stack Overflow

Dynamically Javascript to increase the value of checkbox

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related