elliottdan elliottdan - 4 months ago 12
HTML Question

incremental value of single text box on javascript dynamic table

I have a dynamically created table with 4 text inputs and 1 drop down selection.
When the user clicks the Add button, a clone of the previous row is added to the table. That works as it should. what I'm trying to do is increase the Unit ID input by 1. For example first row is 1111T-01 when the add button is clicked I want the next row Unit ID to be 1111T-02. Thank you.

HTML CODE

<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete ALL rows.</p>

<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>



<br>

<table id="myTable" class="form">

<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Unit ID</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>

<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" required>
</td>

<td>
<input type="text" name="JobCode[]" required>
</td>

<td>
<input type="text" name="UnitID[]" required>
</td>

<td>
<input type="text" name="ModelNumber[]" required>
</td>

<td>
<select id="Scope" name="Scope[]" required>
<option>100OA</option>
<option>BTank</option>
<option>WSEcon</option>
<option>NetPkg</option>
<option>CstmCtrl</option>
<option>CstmRef</option>
<option>CstmSM</option>
<option>CstmHV</option>
<option>CPCtrl</option>
<option>DesiHW</option>
<option>DigScroll</option>
<option>DFGas</option>
<option>DWall</option>
<option>MZ-DD</option>
<option>DPP</option>
<option>Encl</option>
<option>PlateHX</option>
<option>ERW</option>
<option>ERWModule</option>
<option>ERVMod</option>
<option>EvapBP</option>
<option>PreEvap</option>
<option>XP</option>
<option>Extend</option>
<option>FanWall</option>
<option>FillStat</option>
<option>FFilt</option>
<option>PFilt</option>
<option>CarbFilt</option>
<option>CustFilt</option>
<option>MGH(H)</option>
<option>GHeat</option>
<option>HighStatic</option>
<option>HGBP</option>
<option>HGRH</option>
<option>HPConv</option>
<option>GFHumid</option>
<option>TOHumid</option>
</select>
</td>

</tr>


</table>


JS CODE

<script>

function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
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
}


function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}

</script>


jsfiddle

Answer

If the unit id is always xxxx-1 and the x is never a - this should do the work.

If the x can be a - let me know and I'll update the answer accordingly.

function incrementUnitId(unitId) {
  var arr = unitId.split('-');
  if (arr.length === 1) {return;} // The unit id is not valid;
  var number = parseInt(arr[1]) + 1;
  return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}

function addRow() {                
  var row = document.getElementById("tableRow"); // find row to copy
  var table = document.getElementById("myTable"); // find table to append to
  var clone = row.cloneNode(true); // copy children too
  row.id = "oldRow"; // We want to take the last value inserted
  clone.cells[2].childNodes[1].value = incrementUnitId(clone.cells[2].childNodes[1].value)
  table.appendChild(clone); // add new row to end of table
}


function deleteRow() {
  document.getElementById("myTable").deleteRow(-1);
}
<h2>Please fill in the information below</h2>
        <form action="pmUnitCreate.php" method="post">
            <p>Click the Add button to add a new row. Click the Delete button to Delete ALL rows.</p>

            <input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
             <input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>



            <br>

            <table id="myTable" class="form">

                 <tr id="heading">
                <th><b><font size="4">Job Number</font></b></th>
                <th><b><font size="4">Job Code</font></b></th>
                <th><b><font size="4">Unit ID</font></b></th>
                <th><b><font size="4">Model Number</font></b></th>
                <th><b><font size="4">Scope</font></b></th>
                </tr>   

                <tr id="tableRow">
                    <td>
                        <input type="text" name="JobNumber[]" required>
                    </td>

                    <td>
                        <input type="text" name="JobCode[]" required>
                    </td>

                    <td>
                        <input type="text" name="UnitID[]" required>
                    </td>

                    <td>
                        <input type="text" name="ModelNumber[]" required>
                    </td>

                    <td>
                        <select id="Scope" name="Scope[]" required>
                            <option>100OA</option>
                            <option>BTank</option>
                            <option>WSEcon</option>
                            <option>NetPkg</option>
                            <option>CstmCtrl</option>
                            <option>CstmRef</option>
                            <option>CstmSM</option>
                            <option>CstmHV</option>
                            <option>CPCtrl</option>
                            <option>DesiHW</option>
                            <option>DigScroll</option>
                            <option>DFGas</option>
                            <option>DWall</option>
                            <option>MZ-DD</option>
                            <option>DPP</option>
                            <option>Encl</option>
                            <option>PlateHX</option>
                            <option>ERW</option>
                            <option>ERWModule</option>
                            <option>ERVMod</option>
                            <option>EvapBP</option>
                            <option>PreEvap</option>
                            <option>XP</option>
                            <option>Extend</option>
                            <option>FanWall</option>
                            <option>FillStat</option>
                            <option>FFilt</option>
                            <option>PFilt</option>
                            <option>CarbFilt</option>
                            <option>CustFilt</option>
                            <option>MGH(H)</option>
                            <option>GHeat</option>
                            <option>HighStatic</option>
                            <option>HGBP</option>
                            <option>HGRH</option>
                            <option>HPConv</option>
                            <option>GFHumid</option>
                            <option>TOHumid</option>
                        </select>
                    </td>

                </tr>


</table>