Dynamic input with jquery

Navigation
0

I need to create dynamic inputs 

/*Crear input dinamico: distancia de izquierda a derecha entre sanitarios.*/
$('#dynamicSanitary').change(function(){
  var val = $(this).val();
  var disSanitary = disSanitary;
  var innerhtml = '';
  for (var i = 0; i < val; i++) {
    innerhtml += "<input type='text' class='form-control big2' placeholder='Distancia' id='" + (i + 1) + "' name='" + (i + 1) + "' size=5>";
  }

$("#dis").html(innerhtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="custom-select mb-2 mr-sm-2 mb-sm-0 form-control big" id="dynamicSanitary">
          <option selected>Ingrese cant sanitarios</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="col-3  center-block rabbit" id="dis">
        
        </div>

        <select class="custom-select mb-2 mr-sm-2 mb-sm-0 form-control big" id="dynamicSanitary">
          <option selected>Ingrese cant sanitarios</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="col-3  center-block rabbit" id="dis">

How to do so that the second select also generates me inputs dynamically without having to change the id ?. what I can think of is that the id be dynamic.

    
asked by Eduard Zora 21.03.2017 в 17:56
source

2 answers

0

You are repeating the identifiers of your elements in the DOM, and jQuery has no way to guess specifically what #dinamicSanitary or #dis you mean.

For your use case, you could for example use classes to refer to the selectors and their respective divs: 

/*Crear input dinamico: distancia de izquierda a derecha entre sanitarios.*/

$('.dynamicSanitary').change(function(){
  var val = $(this).val();
  var disSanitary = disSanitary;
  var innerhtml = '';
  for (var i = 0; i < val; i++) {
  innerhtml += "<input type='text' class='form-control big2' placeholder='Distancia' id='" + (i + 1) + "' name='" + (i + 1) + "' size=5>";
  }
  var dis = $(this).next('.dis');
  dis.html(innerhtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="custom-select mb-2 mr-sm-2 mb-sm-0 form-control big dynamicSanitary"  >
          <option selected>Ingrese cant sanitarios</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="col-3  center-block rabbit dis">
        
        </div>

<select class="custom-select mb-2 mr-sm-2 mb-sm-0 form-control big dynamicSanitary">
          <option selected>Ingrese cant sanitarios</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="col-3  center-block rabbit dis" >
    
answered by 21.03.2017 / 19:36
source
0

First change the event from ID to class

Second select the "body" or some parent DIV of the dynamicSanitary class and the binding will be done on the new class .dynamicSanitary

PD. I took the freedom to use ON instead of 'change' because I usually use it more. That should work ... problematically. 

$('body').on('change', '.dynamicSanitary', function(){
  var val = $(this).val();
  var disSanitary = disSanitary;
  var innerhtml = '';
  for (var i = 0; i < val; i++) {
    innerhtml += "<input type='text' class='form-control big2' placeholder='Distancia' id='" + (i + 1) + "' name='" + (i + 1) + "' size=5>";
  }

$("#dis").html(innerhtml);
});
    
answered by 21.03.2017 в 20:56
Get data only from some soap objects in android and show in listview Javascript closure in for loop