Reputation: 29

applying javascript after dynamically adding form elements

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

Upvotes: 1

Answers (1)

Mosh Feu

Reputation: 29249

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>

Upvotes: 1

applying javascript after dynamically adding form elements

Answers (1)

Related Questions