How to add DIV's dynamically in a form based on a select input with Jquery

Question

var beneficiarioDiv = $('<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>');

$('#beneficiarios').change(function() {
  var beneficiarios = $('#beneficiarios :selected').val(); 
  // this gives me the value that the user selected 

  <div class="beneficiarios-wrapper"></div>
  // this is the div where I want to append the number of divs selected by the user 

});

 <label for="beneficiarios">Cantidad de beneficiarios</label>
          <select name="beneficiarios" id="beneficiarios">
            <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>
            <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>
          </select>

I have been hitting my head cuz I can't think on a way to get this to work ( I'm new with Jquery )

So.. I have a select input field in a form with number options.. I want to check which of the options the user selected and add a DIV the number of times the user selected ( from 0 to 10 ) and if the user selects a number lower than the one he previously chose delete the DIVs previously added and add the ones he now chose (if he selects number 3 add 3 DIVs, if he now selects 2 because he was just mistaken then just show 2 instead of the 3)

I know how to get the number the user selected with the .change event listener and the :selected.val() method.. my problem is appending the divs that number of times the user selected, and deleting them if the user selects a number lower than.

Please i don't know how to make this work!

Zac · Accepted Answer · 2018-04-07 15:57:00Z

In your change function, first clear the wrapper and then append the divs in a loop

var beneficiarioDiv = '<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>';

$('#beneficiarios').change(function() {
  var beneficiarios = $('#beneficiarios :selected').val();
  // this gives me the value that the user selected 
  $('.beneficiarios-wrapper').empty();
  while (beneficiarios--) {
    $('.beneficiarios-wrapper').append(beneficiarioDiv);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
            <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>
            <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>
          </select>

<div class="beneficiarios-wrapper"></div>

Cuong Vu · Accepted Answer · 2018-04-07 16:04:57Z

0

You can clear the div on change event. Then use a for loop to append div

    const divToAppend = '<div>test</div>';
    let number = $('#beneficiarios').val();
    $('#beneficiarios').on('change', function () {
      $('#placeholder').html('');
      number = $(this).val();
      for (let i = 0; i < number; i++) {
        $('#placeholder').append(divToAppend);

      }
    });

  <label for="beneficiarios">Cantidad de beneficiarios</label>
  <select name="beneficiarios" id="beneficiarios">
    <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>
    <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>
  </select>
  <div id="placeholder"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Apr 7, 2018 at 16:04

Cuong Vu

3,72316 silver badges16 bronze badges

1 Comment

roger rengifo Over a year ago

Is it possible to append the same way but instead of creating the html inside the JS file, call it from another HTML trough AJAX?

lukas293 · Accepted Answer · 2018-04-07 15:44:41Z

0

You could just append the divs in a loop:

var b = = $('#beneficiarios :selected').val();
while(b--) {
   $(".beneficiarios-wrapper").append("<div>"+b+"</div>")     
}

answered Apr 7, 2018 at 15:44

lukas293

5581 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to add DIV's dynamically in a form based on a select input with Jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related