Dynamic row with dropdown checkboxes not working

Question

I have a html form that a user can add and delete rows as needed. This part works as it should. Part of the row is a drop down with check boxes, This also works as it should. The issue at hand is when the user clicks the Add button to add a new row, the check box drop down does not work on the new line.

Sorry the code blocks are so long I just want to make sure I didn't leave something so obvious out. Thank you in advance for any and all help I'm relatively new to all of this.

Fiddle

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 last row.</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">Unit Number</font></b></th>
                <th><b><font size="4">Job Code</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[]" value="<?php echo $JobNumber;?>" readonly>
                    </td>

                    <td>
                        <input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
                    </td>

                    <td>
                        <select name="JobCode[]" style="background-color:#FFE68C" required>
                            <option></option>
                            <option>F</option>
                            <option>FS</option>
                            <option>PD</option>
                            </select>
                    </td>

                    <td>
                        <input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
                    </td>

        <td>
                <div id="Scope[]" class="dropdown-check-list" tabindex="100">
                <span class="anchor" style="background-color:#FFE68C">Select Scope</span>
                 <ul id="items" class="items">
            <input type="checkbox" name="S1" value="100OA"/><font size="4">100OA</font>
            <input type="checkbox" name="S2" value="BTank"/><font size="4">BTank</font>
             <input type="checkbox" name="S3" value="WSEcon"/><font size="4">WSEcon</font>
              <input type="checkbox" name="S4" value="NetPkg"/><font size="4">NetPkg</font>
               <input type="checkbox" name="S5" value="CstmCtrl"/><font size="4">CstmCtrl</font>
               <br><br>
                <input type="checkbox" name="S6" value="CstmRef"/><font size="4">CstmRef</font>
                 <input type="checkbox" name="S7" value="CstmSM"/><font size="4">CstmSM</font>
                  <input type="checkbox" name="S8" value="CstmHV"/><font size="4">CstmHV</font>
                   <input type="checkbox" name="S9" value="CPCTrl"/><font size="4">CPCtrl</font>
                    <input type="checkbox" name="S10" value="DesiHW"/><font size="4">DesiHW</font>
                    <br><br>
            <input type="checkbox" name="S11" value="DigScroll"/><font size="4">DigScroll</font>
             <input type="checkbox" name="S12" value="DFGas"/><font size="4">DFGas</font>
              <input type="checkbox" name="S13" value="DWall"/><font size="4">DWall</font>
               <input type="checkbox" name="S14" value="MZ-DD"/><font size="4">MZ-DD</font>
                <input type="checkbox" name="S15" value="DPP"/><font size="4">DPP</font>
                 <input type="checkbox" name="S16" value="Encl"/><font size="4">Encl</font>
                 <br><br>
                 <input type="checkbox" name="S17" value="PlateHX"/><font size="4">PlateHX</font>
                   <input type="checkbox" name="S18" value="ERW"/><font size="4">ERW</font>
                    <input type="checkbox" name="S19" value="ERWModule"/><font size="4">ERWModule</font>
                     <input type="checkbox" name="S20" value="ERVMod"/><font size="4">ERVMod </font>
            <input type="checkbox" name="S21" value="EvapBP"/><font size="4">EvapBP</font>
            <br><br>
             <input type="checkbox" name="S22" value="PreEvap"/><font size="4">PreEvap</font>
              <input type="checkbox" name="S23" value="XP"/><font size="4">XP</font>
               <input type="checkbox" name="S24" value="Extended"/><font size="4">Extend</font>
                <input type="checkbox" name="S25" value="FanWall"/><font size="4">FanWall</font>
                 <input type="checkbox" name="S26" value="FillStat"/><font size="4">FillStat</font>
                  <input type="checkbox" name="S27" value="FFilt"/><font size="4">FFilt</font>
                  <br><br>
                   <input type="checkbox" name="S28" value="PFilt"/><font size="4">PFilt</font>
                    <input type="checkbox" name="S29" value="CarbFilt"/><font size="4">CarbFilt</font>
                     <input type="checkbox" name="S30" value="CustFilt"/><font size="4">CustFilt </font>
            <input type="checkbox" name="S31" value="MGH(H)"/><font size="4">MGH(H)</font>
             <input type="checkbox" name="S32" value="GHeat"/><font size="4">GHeat</font>
             <br><br>
              <input type="checkbox" name="S33" value="HighStatic"/><font size="4">HighStatic</font>
               <input type="checkbox" name="S34" value="HGBP"/><font size="4">HGBP</font>
                <input type="checkbox" name="S35" value="HGRH"/><font size="4">HGRH</font>
                 <input type="checkbox" name="S36" value="HPConv"/><font size="4">HPConv</font>
                  <input type="checkbox" name="S37" value="GFHumid"/><font size="4">GFHumid</font>
                  <br><br>
                   <input type="checkbox" name="S38" value="TOHumid"/><font size="4">TOHumid</font>
                    <input type="checkbox" name="S39" value="MHGRH"/><font size="4">MHGRH</font>
                     <input type="checkbox" name="S40" value="LowAF"/><font size="4">LowAF</font>
            <input type="checkbox" name="S41" value="LowAFSF"/><font size="4">LowAFSF</font>
             <input type="checkbox" name="S42" value="LowAmbient"/><font size="4">LowAmbient</font>
             <br><br>
              <input type="checkbox" name="S43" value="MEHeat(R)"/><font size="4">MEHeat(R)</font>
               <input type="checkbox" name="S44" value="MEHeat(I)"/><font size="4">MEHeat(I)</font>
                <input type="checkbox" name="S45" value="MGH(R)"/><font size="4">MGH(R)</font>
                 <input type="checkbox" name="S46" value="MGH(H)"/><font size="4">MGH(H)</font>
                  <input type="checkbox" name="S47" value="MtrRR"/><font size="4">MtrRR</font>
                  <br><br>
                   <input type="checkbox" name="S48" value="MotorGM"/><font size="4">MotorGM</font>
                    <input type="checkbox" name="S49" value="MZ-Mod"/><font size="4">MZ-Mod</font>
                     <input type="checkbox" name="S50" value="NatConv"/><font size="4">NatConv</font>
            <input type="checkbox" name="S51" value="OAFMS"/><font size="4">OAFMS</font>
             <input type="checkbox" name="S52" value="OSMotor"/><font size="4">OSMotor</font>
             <br><br>
              <input type="checkbox" name="S53" value="MZ-VAV"/><font size="4">MZ-VAV</font>
               <input type="checkbox" name="S54" value="Mon"/><font size="4">Mon</font>
                <input type="checkbox" name="S55" value="PumpPkg"/><font size="4">PumpPkg</font>
                 <input type="checkbox" name="S56" value="PipePkg"/><font size="4">PipePkg</font>
                  <input type="checkbox" name="S57" value="ServLite"/><font size="4">ServLite</font>
                  <br><br>
                   <input type="checkbox" name="S58" value="SparkRes"/><font size="4">SparkRes</font>
                    <input type="checkbox" name="S59" value="SSLube"/><font size="4">SSLube</font>
                     <input type="checkbox" name="S60" value="UVLights"/><font size="4">UVLights</font>
            <input type="checkbox" name="S61" value="VSComp"/><font size="4">VSComp</font>
            <br><br>
             <input type="checkbox" name="S62" value="LCVAV"/><font size="4">LCVAV</font>
              <input type="checkbox" name="S63" value="XFVAV"/><font size="4">XFVAV</font>
               <input type="checkbox" name="S64" value="WCCond"/><font size="4">WCCond</font>
                <input type="checkbox" name="S65" value="WSHPConv"/><font size="4">WSHPConv</font>
                 <input type="checkbox" name="S66" value="3RConv"/><font size="4">3RConv</font>
                 <br><br>
                  <input type="checkbox" name="S67" value="WiringGM"/><font size="4">WiringGM</font>
                   <input type="checkbox" name="S68" value="XFan"/><font size="4">XFan</font>
                    <input type="checkbox" name="S69" value="RFan"/><font size="4">RFan</font>
                     <input type="checkbox" name="S70" value="SFan"/><font size="4">SFan</font>
            <input type="checkbox" name="S71" value="OAHood"/><font size="4">OAHood</font>
            <br><br>
             <input type="checkbox" name="S72" value="XAHood"/><font size="4">XAHood</font>
              <input type="checkbox" name="S73" value="XALouver"/><font size="4">XALouver</font>
               <input type="checkbox" name="S74" value="OALouver"/><font size="4">OALouver</font>
                <input type="checkbox" name="S75" value="SteamCoil"/><font size="4">SteamCoil</font>
                 <input type="checkbox" name="S76" value="HWCoil"/><font size="4">HWCoil</font>
                 <br><br>
                  <input type="checkbox" name="S77" value="CHWCoil"/><font size="4">CHWCoil</font>
                   <input type="checkbox" name="S78" value="CondCoil"/><font size="4">CondCoil</font>
                    <input type="checkbox" name="S79" value="DXCoil"/><font size="4">DXCoil</font>
                     <input type="checkbox" name="S80" value="F&BP"/><font size="4">F&BP</font>
            <input type="checkbox" name="S81" value="Xfrmr"/><font size="4">Xfrmr</font>
            </ul>
            </div>
            </td>               




               </tr>

            </table>

JS Code

                <script>

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[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
    table.appendChild(clone); // add new row to end of table
    }


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

var checkList = document.getElementById('Scope[]');
var items = document.getElementById('items');
    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
        if (items.classList.contains('visible')){
            items.classList.remove('visible');
            items.style.display = "none";
        }

        else{
            items.classList.add('visible');
            items.style.display = "block";
        }


    }

    items.onblur = function(evt) {
        items.classList.remove('visible');
    }
            </script>

You're attaching the click event just to the first anchor `checkList.getElementsByClassName('anchor')[0].onclick` so why the new ones should work? — Zakaria Acharki, Aug 15 '16 at 15:24
It works on the first row as it should. When the user adds a new row to the table the newly added drop down does not work. — elliottdan, Aug 15 '16 at 15:32

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

I believe your issue has to do with event binding. You're dynamically adding HTML and therefore events need to be bound to it in order to fire. The answer to this question may help you: Event binding on dynamically created elements?

edited May 23 '17 at 11:51

Community

1
1

answered Aug 15 '16 at 15:17

ModusPwnens

165
3
12

I looked at something similar to that. But that is jQuery and I'm trying to accomplish this just using javascript. – elliottdan Aug 15 '16 at 15:29
Ah, sorry about that. Did you come across this answer? http://stackoverflow.com/questions/30880757/javascript-equivalent-to-on – ModusPwnens Aug 15 '16 at 15:32
I have looked over that answer. It doesn't seem to help me in this situation. Thank you though – elliottdan Aug 15 '16 at 17:00

Dynamic row with dropdown checkboxes not working

1 Answers1