applying javascript after dynamically adding form elements

Question

I'm dynamically building form elements which IDs need to increment to be unique when the form submits. Everything is working except the addition of the javascript that is supposed to fill in the year in a drop-down selection.

It works for the first one because it's not being built dynamically. When the Javascript dynamically builds the form elements and adds the same javascript code it does not dynamically build the years. Is there a better way to accomplish this?

Here is the Javascript:

var child = 1;

function minor_fields() {
  child++;

  var objTo = document.getElementById('minor_fields')
  var divminors = document.createElement("div");
  divminors.setAttribute("class", "form-group removeclass" + child);
  var rdiv = 'removeclass' + child;
  divminors.innerHTML = '<div class="minorSelect"><div class="form-group col-lg-5"><input id="txtMinorFirst' +
    child + '" type="text" name="minorFirst' + child +
    '" placeholder="First Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group col-lg-2"><input id="txtMinorMiddle' +
    child + '" type="text" name="minorMiddle' + child +
    '" placeholder="MI" class="form-control" data-maxlength="1" required></div><div class="form-group col-lg-5"><input id="txtMinorLast' +
    child + '" type="text" name="minorLast' + child +
    '" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group date-dropdowns col-lg-4"><select name="month" id="txtMinorMonth' +
    child + '" data-validation="required" required><option value=""> - Month - </option><option value="01">January</option><option value="02">Febuary</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="day" id="txtMinorDay' +
    child + '" data-validation="required" required><option value=""> - Day - </option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="yearpicker"id="txtMinorYear' + child +
    '" data-validation="required" required><option value=""> - Year - </option></select><script>for (i = new Date().getFullYear(); i > 1900; i--){$("#txtMinorYear' + child + '").append($("<option />").val(i).html(i));}<\/script></div></div><div class="input-group-btn"><button class="btn btn-danger" type="button" onclick="remove_minor_fields(' + child + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove Minor</button></div></div><div class="clear"></div>';

  objTo.appendChild(divminors)
}

function remove_minor_fields(rid) {
  $('.removeclass' + rid).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group" id="fields">
  <h4 class="control-label" for="field1">Minor Information:</h4>
  <div id="minor_fields"></div>
  <div class="controls" id="profs">
    <div id="minorInfo">
      <div class="form-group col-lg-5">
        <input id="txtMinorFirst1" type="text" name="first Name" placeholder="First Name" class="form-control" data-minlenth="2" data-validation="required" required>
      </div>
      <div class="form-group col-lg-2">
        <input id="txtMinorMiddle1" type="text" name="Middle Initial" placeholder="MI" class="form-control" data-maxlength="1">
      </div>
      <div class="form-group col-lg-5">
        <input id="txtMinorLast1" type="text" name="Last Name" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required>
      </div>
      <div class="" id="">
        <div class="form-group date-dropdowns col-lg-4">
          <select name="day" id="txtMinorMonth1" data-validation="required" required>
            <option value=""> - Month - </option>
            <option value="01">January</option>
            <option value="02">Febuary</option>
            <option value="03">March</option>
            <option value="04">April</option>
            <option value="05">May</option>
            <option value="06">June</option>
            <option value="07">July</option>
            <option value="08">August</option>
            <option value="09">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>
        </div>
        <div class="form-group date-dropdowns col-lg-4">
          <select name="day" id="txtMinorDay1" data-validation="required" required>
            <option value=""> - Day - </option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
          </select>
        </div>
        <div class="form-group date-dropdowns col-lg-4">
          <select name="yearpicker" id="txtMinorYear1" data-validation="required" required>
           <option value=""> - Year - </option>
          </select>
          <script>
            for (i = new Date().getFullYear(); i > 1900; i--) {
              $("#txtMinorYear1").append($("<option />").val(i).html(i));
            }
          </script>
        </div>
      </div>
      <div class="input-group-btn">
        <button class="btn btn-success" type="button" onclick="minor_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Minor </button>
      </div>
    </div>
  </div>
</div>

Here is the bootsnipp example: https://bootsnipp.com/user/snippets/N6B0Q

Why don't use an input with a datepicker instead of 3 dropdowns? — adiga
– adiga, Commented Sep 4, 2017 at 15:05
because the client does not want to use a datepicker. They don't want their customers to fool with a calendar. Just choose a month, day and year. — SquidRatt
– SquidRatt, Commented Sep 4, 2017 at 15:26

Mosh Feu · Accepted Answer · 2017-09-04 15:40:11Z

You can move the year fill functionality to separate function and call it on page load and for each child.

Like this:

var child = 1;

function minor_fields() {
  child++;

  var objTo = document.getElementById('minor_fields')
  var divminors = document.createElement("div");
  divminors.setAttribute("class", "form-group removeclass" + child);
  var rdiv = 'removeclass' + child;
  divminors.innerHTML = '<div class="minorSelect"><div class="form-group col-lg-5"><input id="txtMinorFirst' +
    child + '" type="text" name="minorFirst' + child +
    '" placeholder="First Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group col-lg-2"><input id="txtMinorMiddle' +
    child + '" type="text" name="minorMiddle' + child +
    '" placeholder="MI" class="form-control" data-maxlength="1" required></div><div class="form-group col-lg-5"><input id="txtMinorLast' +
    child + '" type="text" name="minorLast' + child +
    '" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group date-dropdowns col-lg-4"><select name="month" id="txtMinorMonth' +
    child + '" data-validation="required" required><option value=""> - Month - </option><option value="01">January</option><option value="02">Febuary</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="day" id="txtMinorDay' +
    child + '" data-validation="required" required><option value=""> - Day - </option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="yearpicker"id="txtMinorYear' + child +
    '" data-validation="required" required><option value=""> - Year - </option></select><script>for (i = new Date().getFullYear(); i > 1900; i--){$("#txtMinorYear' + child + '").append($("<option />").val(i).html(i));}<\/script></div></div><div class="input-group-btn"><button class="btn btn-danger" type="button" onclick="remove_minor_fields(' + child + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove Minor</button></div></div><div class="clear"></div>';
  objTo.appendChild(divminors)
  addYears();
}

function remove_minor_fields(rid) {
  $('.removeclass' + rid).remove();
}

function addYears() {
  for (i = new Date().getFullYear(); i > 1900; i--) {
    $("#txtMinorYear" + (child || 1)).append($("<option />").val(i).html(i));
  }
}

addYears();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group" id="fields">
  <h4 class="control-label" for="field1">Minor Information:</h4>
  <div id="minor_fields"></div>
  <div class="controls" id="profs">
    <div id="minorInfo">
      <div class="form-group col-lg-5">
        <input id="txtMinorFirst1" type="text" name="first Name" placeholder="First Name" class="form-control" data-minlenth="2" data-validation="required" required>
      </div>
      <div class="form-group col-lg-2">
        <input id="txtMinorMiddle1" type="text" name="Middle Initial" placeholder="MI" class="form-control" data-maxlength="1">
      </div>
      <div class="form-group col-lg-5">
        <input id="txtMinorLast1" type="text" name="Last Name" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required>
      </div>
      <div class="" id="">
        <div class="form-group date-dropdowns col-lg-4">
          <select name="day" id="txtMinorMonth1" data-validation="required" required>
            <option value=""> - Month - </option>
            <option value="01">January</option>
            <option value="02">Febuary</option>
            <option value="03">March</option>
            <option value="04">April</option>
            <option value="05">May</option>
            <option value="06">June</option>
            <option value="07">July</option>
            <option value="08">August</option>
            <option value="09">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>
        </div>
        <div class="form-group date-dropdowns col-lg-4">
          <select name="day" id="txtMinorDay1" data-validation="required" required>
            <option value=""> - Day - </option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
          </select>
        </div>
        <div class="form-group date-dropdowns col-lg-4">
          <select name="yearpicker" id="txtMinorYear1" data-validation="required" required>
           <option value=""> - Year - </option>
          </select>
        </div>
      </div>
      <div class="input-group-btn">
        <button class="btn btn-success" type="button" onclick="minor_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Minor </button>
      </div>
    </div>
  </div>
</div>

My pleasure :) Please accept the answer so will help to other people. (Upvote will welcome too :))
I would vote up but my reputation points won't yet allow me. LOL I've used this site for years but never tried working on my reputation. Guess I'm going to have to start.

Collectives™ on Stack Overflow

applying javascript after dynamically adding form elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related