使用选择选项标签动态添加输入字段

Question

I am trying to generate resume for user using jQuery code. What I am trying, user click on select tag and chose year o experience option, based on their choice number of input field is open. like: companyname1, location1 or companyname2, location2.

Script:

<script> 
 $(docment).ready(function(){
     $("#experienceNo").on("change",function(){
     var numInputs = $(this).val();
     $('#experienceSection').html('');
     for(var i=0; i < numInputs; i++)
     {
         var j = i*1;
         $('<div class="form-group"><label for="" class="col-4 col-form-label">Company Name '+j+'</label><div class="col-6"><input type="text" name="companyname[]" class="form-control" required></div></div>');
     }
   });
 });
 </script>

HTML:

<h4>Experience Section</h4>
<div class="form-group row">
  <label for="experienceNo" class="col-4 col-form-label"> No of company add for experience</label>
  <div class="col-6">
    <select name="experienceNo" id="experienceNo" class="custom-select mb-2 mr-sm-2 mb-sm-0"> 
    <option value="">Select Value</option>`enter code here`
    <option value="0">0</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>
    </select>
    </div>
  </div>
 <div id="experienceSection"></div>
 <div class="form-group row"> 
 <div class="col-6"> 
 <button type="submit" name="genrate" class="btn btn-
 primary">Genrate</button>

Answer 1

Following code will be helpful to you,

 $(document).ready(function(){ $("#experienceNo").on("change",function(){ var numInputs = $(this).val(); $('#experienceSection').html(''); for(var i=0; i < numInputs; i++) { var j = i*1; var $section = $('<div class="form-group"><label for="" class="col-4 col-form-label">Company Name '+j+'</label><div class="col-6"><input type="text" name="companyname[]" class="form-control" required></div></div>'); $('#experienceSection').append($section); } }); }); 

 <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"> </script> <h4>Experience Section</h4> <div class="form-group row"> <label for="experienceNo" class="col-4 col-form-label"> No of company add for experience</label> <div class="col-6"> <select name="experienceNo" id="experienceNo" class="custom-select mb-2 mr-sm-2 mb-sm-0"> <option value="">Select Value</option>`enter code here` <option value="0">0</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> </select> </div> </div> <div id="experienceSection"></div> <div class="form-group row"> <div class="col-6"> <button type="submit" name="genrate" class="btn btn- primary">Genrate</button> 

Make sure that you need to append each dynamically created div to experienceSection

Answer 2

i am trying this code but i still not get output.

Here it is:

 Script:
     $(document).ready(function(){
     $("#experienceNo").on("change",function(){
     var numInputs = $(this).val();
     $('#experienceSection').html('');
     for(var i=0; i < numInputs; i++)
     {
         var j = i*1;
         var $section =$('<div class="form-group"><label for="" class="col-4 
         col-form-label">Company Name '+j+' </label><div class="col-6"><input 
         type="text" name="companyname[]" class="form-control" required></div>
         </div> 
         <div class="form-group"><label for="" class="col-4 col-form-
         label">Location '+j+' </label><div class="col-6"><input type="text" 
         name="location[]" class="form-control" required></div></div><hr>');

     $('#experienceSection').append($section);
      }
   });
 });

 HTML:
  <form>
  <h4>Experience Section</h4>
  <div>
  <label> No of company add for experience</label>
  <select name="experienceNo" id="experienceNo"> 
  <option value="">Select Value</option>
  <option value="0">0</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>
  </select>
 </div>
 <div id="experienceSection"></div>
 <div> 
 <button type="submit" name="genrate" class="btn btnprimary">Genrate</button>
</div>