動態添加表單元素後應用javascript

Question

我動態構建了表單提交時ID需要增加的唯一表單元素。除了在下拉選擇中填充年份的JavaScript之外，所有內容都可以工作。

它適用於第一個，因爲它不是動態構建的。當Javascript動態構建表單元素並添加相同的JavaScript代碼時，它不會動態構建年份。有沒有更好的方法來完成這一點？

這裏是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>

這裏是bootsnipp例如：https://bootsnipp.com/user/snippets/N6B0Q

Answer 1

您可以將一年填充功能，單獨的函數，並調用它在頁面加載和爲每個孩子。

像這樣：

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>