1

inputs a añadir

Puedo añadir y eliminar los inputs perfectamente, cada uno con su 'name[]' para posteriormente guardarlos en la base de datos. Pero al añadir los inputs, estos no se muestran correctamente. error de visualización Cuando inspecciono los divs, veo que el primer div que se crea en la función envuelve a todo los inputs, incluyendo el principal que crea a los demás inputs. No estoy seguro cual sea el problema, ya que he intentado cambiando las clases de los inputs (class=row) a los que se van agregando, pero el resultado es peor.

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><div class="col-third"><div class="input-group input-group-icon"><input type="text" name="nombre_pax_pref[]" placeholder="Nombre Pax" required/><div class="input-icon"><i class="fas fa-calendar-alt"></i></div></div></div><div class="col-third"><select style="width: 29%; padding-right: 10px;float: left;" name="select" id="selectLg" class="form-control-lg form-control" onchange="this.nextElementSibling.value=this.value"><option disabled selected>-ID-</option><option>RUT:&nbsp;</option><option>PAS:&nbsp;</option><option>DNI:&nbsp;</option></select><input style="width: 71%" type="text" placeholder="Nº" name="rut_pax[]"/></div><button type="button" class="btn btn-danger btn-lg remove_field">-</button></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
.row {
    zoom: 1;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;

@media (min-width: 992px)
.col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;

.col-lg-12 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-third {
    padding-right: 10px;
    float: left;
    width: 33.33333333%;

.input-group-icon {
    position: relative;
}

.input-group {
    margin-bottom: 1em;
    zoom: 1;
}
.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.input-group-icon input {
    padding-left: 4.4em;
}

.input-group-icon .input-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.4em;
    height: 3.4em;
    line-height: 3.4em;
    text-align: center;
    pointer-events: none;
}

input, textarea {
    border: none;
}
input, input[type="radio"] + label, input[type="checkbox"] + label:before, select option, select {
    width: 100%;
    padding: 1em;
    line-height: 1.4;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    -webkit-transition: 0.35s ease-in-out;
    -moz-transition: 0.35s ease-in-out;
    -o-transition: 0.35s ease-in-out;
    transition: 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div class="col-lg-12">
    <div class="input_fields_wrap">
        <div class="col-third">
          <div class="input-group input-group-icon">
            <input type="text" name="nombre_pax_pref[]" placeholder="Nombre Pax" required/>
            <div class="input-icon"><i class="fas fa-calendar-alt"></i></div>
          </div>
        </div>
        <div class="col-third">
          <select name="select" id="selectLg" class="form-control-lg form-control" onchange="this.nextElementSibling.value=this.value">
            <option disabled selected>-ID-</option>
            <option>RUT:&nbsp;</option>
            <option>PAS:&nbsp;</option>
            <option>DNI:&nbsp;</option>
          </select>
          <input type="text" placeholder="Nº" name="rut_pax[]"/>
        </div>
        <div class="col-third">
            <button type="button" class="btn btn-success btn-lg add_field_button">+</button>
        </div>
    </div>
  </div>
   

3
  • 1
    Deberías agregar los estilos de esa sección de tu código el 12 jun. 2019 a las 14:21
  • Ya agregué los estilos. el 12 jun. 2019 a las 14:31
  • Se sigue viendo sin estilos en el snippet, si usas librerías debes importarlas, revisa bien! el 12 jun. 2019 a las 14:45

1 respuesta 1

0

tienes un div al inicio del codigo y te falta otro antes del div al principio de <button type="button" class="btn btn-danger btn-lg remove_field">+</button></di> del codigo javascript pero no es requerido puedes usar el metodo before y agregarle un id="btn-add".

ejemplo:

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if($('.col-third > select[id="selectLg"]').length < max_fields){ //max input box allowed
        $("#btn-add").before('<div class="col-third"><div class="input-group input-group-icon"><input type="text" name="nombre_pax_pref[]" placeholder="Nombre Pax" required/><div class="input-icon"><i class="fas fa-calendar-alt"></i></div></div></div><div class="col-third"><select style="width: 29%; padding-right: 10px;float: left;" name="select" id="selectLg" class="form-control-lg form-control" onchange="this.nextElementSibling.value=this.value"><option disabled selected>-ID-</option><option>RUT:&nbsp;</option><option>PAS:&nbsp;</option><option>DNI:&nbsp;</option></select><input style="width: 71%" type="text" placeholder="Nº" name="rut_pax[]"/></div>'); //add input box
    }else{
        $("#btn-add").remove();
    }
});
});
    .row {
        zoom: 1;
    }
    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;

    @media (min-width: 992px)
    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;

    .col-lg-12 {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-third {
        padding-right: 10px;
        float: left;
        width: 33.33333333%;

    .input-group-icon {
        position: relative;
    }

    .input-group {
        margin-bottom: 1em;
        zoom: 1;
    }
    .input-group {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
    }

    .input-group-icon input {
        padding-left: 4.4em;
    }

    .input-group-icon .input-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 3.4em;
        height: 3.4em;
        line-height: 3.4em;
        text-align: center;
        pointer-events: none;
    }

    input, textarea {
        border: none;
    }
    input, input[type="radio"] + label, input[type="checkbox"] + label:before, select option, select {
        width: 100%;
        padding: 1em;
        line-height: 1.4;
        background-color: #f9f9f9;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        -webkit-transition: 0.35s ease-in-out;
        -moz-transition: 0.35s ease-in-out;
        -o-transition: 0.35s ease-in-out;
        transition: 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
      <div style="padding: 0;"class="col-lg-12">
        <div class="input_fields_wrap">
            <div class="col-third">
              <div class="input-group input-group-icon">
                <input type="text" name="nombre_pax_pref[]" placeholder="Nombre Pax" required/>
                <div class="input-icon"><i class="fas fa-calendar-alt"></i></div>
              </div>
            </div>
            <div class="col-third">
              <select style="width: 29%; padding-right: 10px;float: left;" name="select" id="selectLg" class="form-control-lg form-control" onchange="this.nextElementSibling.value=this.value">
                <option disabled selected>-ID-</option>
                <option>RUT:&nbsp;</option>
                <option>PAS:&nbsp;</option>
                <option>DNI:&nbsp;</option>
              </select>
              <input style="width: 71%" type="text" placeholder="Nº" name="rut_pax[]"/>
            </div>
            <div class="col-third" id="btn-add">
                <button type="button" class="btn btn-success btn-lg add_field_button">+</button>
            </div>
        </div>
      </div>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.