HTML Select Dropdown value not generating when Using clone jQuery

Question

Working on Jquery clone my current code is working for generating new id creating clone ... But what I am not getting is In the first HTML select if I select some option it will get the value of the option and populate to the next box. But With my current code the clone was happening but when i select the HTML select OPT the value is changing in the original textbox not populating on current text box.

Here is my HTML Code

<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
<label>School Name</label>
<br/>
<select onchange="getSchoolName(this)" class="slt_Field" id="txt_schName" name="txt_schName"d>
    <option value="">Please Select</option>
    <option value="Emirates College of Technology- UAE">COL000001</option>
    <option value="Al Khawarizmi International College- UAE">COL000002</option>
    <option value="Syscoms College">COL000003</option>
    <option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
    <option value="Advanced Placement">COL000005</option>
    <option value="Al Buraimi College (Uni Clge)">COL000006</option>
    <option value="Al-Ain Community College">COL000007</option>
    <option value="AMA Computer College">COL000008</option>
    <option value="Arab Academy for Bankg and Fin">COL000009</option>
    <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>
    <option value="Arapahoe Community College">COL000011</option>
</select>
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
<br>
<input type="text" class="ipt_Field" name="school_Name" id="school_Name" disabled/>
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
   <label><span class="text-error">*</span>High School Avg / CGPA</label>
   <br/>
  <input type="text" class="ipt_Field" id="ipt_Havg" name="ipt_Havg" />
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
    <label><span class="text-error">*</span>Grade Type @</label>
  <br/>
  <select class="slt_Field" id="ipt_grd" name="ipt_grd">
    <option value="">Please Select</option>
    <option value="n">100</option>
    <option value="n1">4</option>
    <option value="c">CHAR</option>
  </select>
</div>

Here is my fiddle Link

Kindly help me

Thanks in advance Mahadevan

Answer 1

You have a few issues.

1. Most importantly, if you're going to be cloning and adding elements like this, you should really be using classes to access the elements rather than Ids that way you don't have to keep up with the number of elements and have a bunch of incremental ids.

2. Next, your js function getSchoolName(data) calls document.getElementById("school_Name").value = data.value; which means that every time someone changes a select that calls getSchoolName(data) you set the selected text to the element with the id school_Name rather than the corresponding element. This is fixed by fixing the first issue.

3. You have the class edu_add_button on both your less and more buttons making them BOTH add clones

4. Additionally, you should really bind your functions to the elements rather than doing onchange="getSchoolName(this)" .

5. If a user types in a box then adds a new row, the cloned elements will contain all the same text/selections as the elements that were cloned. You should store a copy of the first row on load and use that to make your later clones to avoid that.

This should get you going:

Here's a working jsFiddle

 // store a copy of the first row when the page loads // later, use this copy to make your new elements so the // clones dont contain the same text as the cloned elements $('.cloned-row1:eq(0)').data('stored-clone', $('.cloned-row1:eq(0)').clone()) $(document).on("click", ".edu_add_button", function() { var i = $('.cloned-row1').length; $('.cloned-row1:eq(0)').data('stored-clone').clone().insertAfter(".cloned-row1:last"); }); $(document).on('click', ".btn_less1", function() { var len = $('.cloned-row1').length; if (len > 1) { $(this).closest(".cloned-row1").remove(); } }); $(document).on('change', '.txt_schName', function() { var cur = $('.txt_schName').index($(this)); $('.school_Name').eq(cur).val($(this).val()) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container-fluid cloned-row1"> <div class="row"> <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3"> <label>School Name</label> <br/> <select class="slt_Field txt_schName" name="txt_schName[]"> <option value="">Please Select</option> <option value="Emirates College of Technology- UAE">COL000001</option> <option value="Al Khawarizmi International College- UAE">COL000002</option> <option value="Syscoms College">COL000003</option> <option value="Abounajm Khanj Pre-Uni Center">COL000004</option> <option value="Advanced Placement">COL000005</option> <option value="Al Buraimi College (Uni Clge)">COL000006</option> <option value="Al-Ain Community College">COL000007</option> <option value="AMA Computer College">COL000008</option> <option value="Arab Academy for Bankg and Fin">COL000009</option> <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option> <option value="Arapahoe Community College">COL000011</option> </select> </div> <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3"> <br> <input type="text" class="ipt_Field school_Name" name="school_Name[]" disabled/> </div> <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3"> <label><span class="text-error">*</span>High School Avg / CGPA</label> <br/> <input type="text" class="ipt_Field ipt_Havg" id="" name="ipt_Havg[]" /> </div> <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3"> <label><span class="text-error">*</span>Grade Type @</label> <br/> <select class="slt_Field ipt_grd" name="ipt_grd[]"> <option value="">Please Select</option> <option value="n">100</option> <option value="n1">4</option> <option value="c">CHAR</option> </select> </div> </div> <button class="btn_less1 btn_right ">Less</button> <button class="btn_more btn_right edu_add_button">Add More</button> </div>

Answer 2

Just update your getSchoolName function.

function getSchoolName(data) {
    var parentContainer = $(data).closest(".cloned-row1");
    $("input[name='school_Name']",parentContainer).val(data.value);
}

I just update your fiddle code. For running code check the Link