How can I use a .append () within a select event? - Jquery

Question

How can I use a .append () within a select event? - Jquery

Navigation

#1 by (1 votes)

0

What I want to do exactly is to generate some input within a form, and generate it by means of a select that will have some numbers so that the append generates these inputs

Here I leave the code of the form:

<div class="modal fade" id="Modal-Familia">
   <div class="modal-dialog modal-sm">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"> </h4>
         </div>
         <div class="photo" id="familyimg">
         </div>
         <div class="modal-body">
            <div class="row">
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="tpdoc">Numero de Familiares</label>
                     <div class="selectContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-num"></i></span>
                           <select class="form-control">
                              <option value=" " disabled selected hidden>nro. Acompañantes</option>
                              <option>1</option>
                              <option>2</option>
                              <option>3</option>
                              <option>4</option>
                              <option>5</option>
                              <option>6</option>
                              <option>7</option>
                              <option>8</option>
                              <option>9</option>
                              <option>10</option>
                           </select>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="tpdoc">Tipo de Documento</label>
                     <div class="selectContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-dni"></i></span>
                           <select class="form-control">
                              <option value=" " disabled selected hidden>Porfavor escoja un Doc</option>
                              <option value="DNI">DNI</option>
                              <option value="C.Ext.">C.Ext.</option>
                              <option value="Pasaporte">Pasaporte</option>
                           </select>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="doc">Documento</label>
                     <div class="inputGroupContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-num"></i></span>
                           <input placeholder="Ingrese documento" class="form-control" type="text" onkeypress="return soloNumeros(event)" maxlength="0">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="doc" >Vencimiento doc</label>
                     <div class="inputGroupContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-ven"></i></span>
                           <input placeholder="Ingrese Fecha de Vencimiento del Doc." class="form-control inputfecha" type="text" onkeypress="return soloNumeros(event)">
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="nombre">Nombre</label>
                     <div class="inputGroupContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-add"></i></span>
                           <input placeholder="Ingrese Nombres" class="form-control" type="text" onkeypress="return soloLetras(event)">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="phone">Apellidos</label>
                     <div class="inputGroupContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-pen"></i></span>
                           <input placeholder="Ingrese Apellidos" class="form-control" type="text" onkeypress="return soloLetras(event)">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
         </div>
      </div>
   </div>
</div>

This is how it looks visually:

This is the Modal where I have the form and I want the extra inputs to put under the input text "Last Name"

and these are the input I want to add every time it is generated with the .append ()

<div class="row">
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="tpdoc">Tipo de Documento</label>
                     <div class="selectContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-dni"></i></span>
                           <select class="form-control">
                              <option value=" " disabled selected hidden>Porfavor escoja un Doc</option>
                              <option value="DNI">DNI</option>
                              <option value="C.Ext.">C.Ext.</option>
                              <option value="Pasaporte">Pasaporte</option>
                           </select>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="doc">Documento</label>
                     <div class="inputGroupContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-num"></i></span>
                           <input placeholder="Ingrese documento" class="form-control" type="text" onkeypress="return soloNumeros(event)" maxlength="0">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="doc" >Vencimiento doc</label>
                     <div class="inputGroupContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-ven"></i></span>
                           <input placeholder="Ingrese Fecha de Vencimiento del Doc." class="form-control inputfecha" type="text" onkeypress="return soloNumeros(event)">
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="nombre">Nombre</label>
                     <div class="inputGroupContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-add"></i></span>
                           <input placeholder="Ingrese Nombres" class="form-control" type="text" onkeypress="return soloLetras(event)">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="phone">Apellidos</label>
                     <div class="inputGroupContainer">
                        <div class="input-group">
                           <span class="input-group-addon svg-ico"><i class="icon-pen"></i></span>
                           <input placeholder="Ingrese Apellidos" class="form-control" type="text" onkeypress="return soloLetras(event)">
                        </div>
                     </div>
                  </div>
               </div>
            </div>

If by A or B you can put an independent ID to the new input that is generated or if you can somehow take its value or your text with the nth-child to take them with jquery I would be very grateful if you would they will confirm it.

I would appreciate it if you would give me some of your knowledge about Jquery to do this, I swear to you and tried to see forums and documentation but I did not get it, thank you very much to everyone who took the trouble:)

javascript jquery

asked by Israel Correa Quevedo 24.05.2018 в 19:55

source

1 answer

Convert an element of an array into a string in php while not running

score 1 · Accepted Answer

Add an identifier to select

<select class="form-control" id="nroAcompanantes">

Then at the end of the row that contains the Last Name field, add an empty div , like this:

<div class="row">
   <div class="col-md-6">
      <div class="form-group">
         <label for="phone">Apellidos</label>
         <div class="inputGroupContainer">
            <div class="input-group">
               <span class="input-group-addon svg-ico"><i class="icon-pen"></i></span>
               <input placeholder="Ingrese Apellidos" class="form-control" type="text" onkeypress="return soloLetras(event)">
            </div>
         </div>
      </div>
   </div>
</div>
<div id="camposDinamicos">
</div>

Finally with jQuery we obtain the number of companions, that data will serve us for two actions:

Assign the ID="extra '+ i +'" to each row .

Define the number of iterations of FOR .

Dynamic content is assigned to the divRow variable, we clean the content with html () before doing each append () .

$('#nroAcompanantes').change(function(){
  var nroAcompanantes = $(this).val();
  var divRow = '';
  for (var i = 0; i < nroAcompanantes; i++) {
    divRow += '<div class="row" id="extra' + i + '">';
      divRow +='   <div class="col-md-6">';
      divRow +='      <div class="form-group">';
      divRow +='         <label for="tpdoc">Tipo de Documento</label>';
      divRow +='         <div class="selectContainer">';
      divRow +='            <div class="input-group">';
      divRow +='               <span class="input-group-addon svg-ico"><i class="icon-dni"></i></span>';
      divRow +='               <select class="form-control">';
      divRow +='                  <option value=" " disabled selected hidden>Porfavor escoja un Doc</option>';
      divRow +='                  <option value="DNI">DNI</option>';
      divRow +='                  <option value="C.Ext.">C.Ext.</option>';
      divRow +='                  <option value="Pasaporte">Pasaporte</option>';
      divRow +='               </select>';
      divRow +='            </div>';
      divRow +='         </div>';
      divRow +='      </div>';
      divRow +='   </div>';
      divRow +='   <div class="col-md-6">';
      divRow +='      <div class="form-group">';
      divRow +='         <label for="doc">Documento</label>';
      divRow +='         <div class="inputGroupContainer">';
      divRow +='            <div class="input-group">';
      divRow +='               <span class="input-group-addon svg-ico"><i class="icon-num"></i></span>';
      divRow +='               <input placeholder="Ingrese documento" class="form-control" type="text" onkeypress="return soloNumeros(event)" maxlength="0">';
      divRow +='            </div>';
      divRow +='         </div>';
      divRow +='      </div>';
      divRow +='   </div>';
      divRow +='</div>';
      divRow +='<div class="row">';
      divRow +='   <div class="col-md-6">';
      divRow +='      <div class="form-group">';
      divRow +='         <label for="doc" >Vencimiento doc</label>';
      divRow +='         <div class="inputGroupContainer">';
      divRow +='            <div class="input-group">';
      divRow +='               <span class="input-group-addon svg-ico"><i class="icon-ven"></i></span>';
      divRow +='               <input placeholder="Ingrese Fecha de Vencimiento del Doc." class="form-control inputfecha" type="text" onkeypress="return soloNumeros(event)">';
      divRow +='            </div>';
      divRow +='         </div>';
      divRow +='      </div>';
      divRow +='   </div>';
      divRow +='   <div class="col-md-6">';
      divRow +='      <div class="form-group">';
      divRow +='         <label for="nombre">Nombre</label>';
      divRow +='         <div class="inputGroupContainer">';
      divRow +='            <div class="input-group">';
      divRow +='               <span class="input-group-addon svg-ico"><i class="icon-add"></i></span>';
      divRow +='               <input placeholder="Ingrese Nombres" class="form-control" type="text" onkeypress="return soloLetras(event)">';
      divRow +='            </div>';
      divRow +='         </div>';
      divRow +='      </div>';
      divRow +='   </div>';
      divRow +='</div>';
      divRow +='<div class="row">';
      divRow +='   <div class="col-md-6">';
      divRow +='      <div class="form-group">';
      divRow +='         <label for="phone">Apellidos</label>';
      divRow +='         <div class="inputGroupContainer">';
      divRow +='            <div class="input-group">';
      divRow +='               <span class="input-group-addon svg-ico"><i class="icon-pen"></i></span>';
      divRow +='               <input placeholder="Ingrese Apellidos" class="form-control" type="text" onkeypress="return soloLetras(event)">';
      divRow +='            </div>';
      divRow +='         </div>';
      divRow +='      </div>';
      divRow +='   </div>';
      divRow +='</div>';
  }
  $('#camposDinamicos').html('');
  $('#camposDinamicos').append(divRow);
});