0

Tengo un form:

{!! Form::open(['route' => 'visits.store', 'method' => 'POST', 'class' => 'form']) !!}
<div class="form-group">
    <div class="form-row">
        <div class="col-md-12 col-sm-12 col-xs-12 pb-4 text-center">
            <a href="javascript:void(0);" class="btn btn-success add_button form-control col-md-6 col-xs-12"><i class="fas fa-plus-circle"></i> Agregar otra persona</a>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6 col-sm-6 text-left">
            <input type="text" id="first_name[]" name="first_name[]" class="form-control" placeholder="Nombre"  required>
        </div>

        <div class="form-group col-md-6 col-sm-6 text-left">
            <input type="text" id="last_name[]" name="last_name[]" class="form-control" placeholder="Apellido"  required>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6 col-sm-6 text-left">
            <input type="text" id="dni[]" name="dni[]" class="form-control" placeholder="DNI"  required>
        </div>
        <div class="form-group col-md-6 col-sm-6 text-left">
            <input type="text" id="phone[]" name="phone[]" class="form-control" placeholder="Teléfono"  required>
        </div>
    </div>
</div>

<div class="form-group text-left">
    {{ Form::submit('Guardar', ['class' => 'btn btn-success btn-block']) }}
</div>
{!! Form::close() !!}

Y agrego nuevos campos con Jquery:

<script>
$(document).ready(function () {
var maxField = 20; 
var addButton = $('.add_button'); 
var wrapper = $('.form');
var fieldHTML = 
    '<div class="trash">'+
        '<div class="form-row">' +
            '<div class="form-group col-md-6 col-sm-6 text-left">' +
                '<input type="text" id="first_name[]" name="first_name[]" class="form-control" placeholder="Nombre"  required>' +
            '</div>' +
            '<div class="form-group col-md-6 col-sm-6 text-left">' +
            '   <input type="text" id="last_name[]" name="last_name[]" class="form-control" placeholder="Apellido"  required>' +
            '</div>' + 
        '</div>' +
        '<div class="form-row">' +
            '<div class="form-group col-md-6 col-sm-6 text-left">' +
                '<input type="text" id="dni[]" name="dni[]" class="form-control" placeholder="DNI"  required>' +
            '</div>' +
            '<div class="form-group col-md-6 col-sm-6 text-left">' +
                '<input type="text" id="phone[]" name="phone[]" class="form-control" placeholder="Teléfono"  required>' +
            '</div>' +
        '</div>' +
        '<div class="pb-4">' +
            '<a href="javascript:void(0);" class="btn btn-sm btn-danger remove_button" title="Remove field">Eliminar<i class="fa fa-close"></i></a>' +
        '</div>'
    '</div>'; 

    var x = 1; 
    $(addButton).click(function () { 
        if (x < maxField) { 
            x++; 
            $(wrapper).append(fieldHTML); 
        }
    });

    $(wrapper).on('click', '.remove_button', function (e) { 
        e.preventDefault();
        $(this).parents('div .trash').remove(); 
        x--; 
    });
});

Pero al agregar los nuevos campos se agregan debajo del botón guardar, como hago para que el botón esté debajo siempre.

3
  • 2
    Saca al botón de tu elemento .wrapper y ponlo a continuación. Así cuando le hagas el append no lo pondrás detrás de este.
    – phpMyGuel
    Commented el 3 ago. 2020 a las 13:17
  • $(fieldHTML).appendTo(wrapper)
    – toto
    Commented el 3 ago. 2020 a las 14:45
  • Muchas gracias, ya lo resolví sacando del Wrapper el botón como indicó phpMyGuel igualmente lo tengo en cuanta. Mil gracias a ambos.
    – Joe
    Commented el 3 ago. 2020 a las 15:16

1 respuesta 1

1

Puedes agregar un container adicional por ejemplo <div class="input-wrap"></div> que se encargue de abarcar todos los inputs para que apliques el metodo append dentro de este container, de esta manera el html que agregas se agregue debajo de los ya existentes.

Nota: creo que el container con la clase .trash esta de mas.

Formulario HTML

{!! Form::open(['route' => 'visits.store', 'method' => 'POST', 'class' => 'form']) !!}
    <div class="input-wrap"> <!-- Este es el container adicional -->
        <div class="form-group">
            <div class="form-row">
                <div class="col-md-12 col-sm-12 col-xs-12 pb-4 text-center">
                    <a href="javascript:void(0);" class="btn btn-success add_button form-control col-md-6 col-xs-12">
                        <i class="fas fa-plus-circle"></i> Agregar otra persona
                    </a>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6 col-sm-6 text-left">
                    <input type="text" id="first_name[]" name="first_name[]" class="form-control" placeholder="Nombre"  required>
                </div>
                <div class="form-group col-md-6 col-sm-6 text-left">
                    <input type="text" id="last_name[]" name="last_name[]" class="form-control" placeholder="Apellido"  required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6 col-sm-6 text-left">
                    <input type="text" id="dni[]" name="dni[]" class="form-control" placeholder="DNI"  required>
                </div>
                <div class="form-group col-md-6 col-sm-6 text-left">
                    <input type="text" id="phone[]" name="phone[]" class="form-control" placeholder="Teléfono"  required>
                </div>
            </div>
        </div>
    </div>
<div class="form-group text-left">
{{ Form::submit('Guardar', ['class' => 'btn btn-success btn-block']) }}
</div>
{!! Form::close() !!}

JQuery

<script>
    
    $(document).ready(function () {
    var maxField = 20; 
    var addButton = $('.add_button'); 
    var wrapper = $('.form .input-wrap');
    var fieldHTML = 
        
            '<div class="form-row">' +
                '<div class="form-group col-md-6 col-sm-6 text-left">' +
                    '<input type="text" id="first_name[]" name="first_name[]" class="form-control" placeholder="Nombre"  required>' +
                '</div>' +
                '<div class="form-group col-md-6 col-sm-6 text-left">' +
                '   <input type="text" id="last_name[]" name="last_name[]" class="form-control" placeholder="Apellido"  required>' +
                '</div>' + 
            '</div>' +
            '<div class="form-row">' +
                '<div class="form-group col-md-6 col-sm-6 text-left">' +
                    '<input type="text" id="dni[]" name="dni[]" class="form-control" placeholder="DNI"  required>' +
                '</div>' +
                '<div class="form-group col-md-6 col-sm-6 text-left">' +
                    '<input type="text" id="phone[]" name="phone[]" class="form-control" placeholder="Teléfono"  required>' +
                '</div>' +
            '</div>' +
            '<div class="pb-4">' +
                '<a href="javascript:void(0);" class="btn btn-sm btn-danger remove_button" title="Remove field">Eliminar<i class="fa fa-close"></i></a>' +
       '</div>'; 
    
        var x = 1; 
        $(addButton).click(function () { 
            if (x < maxField) { 
                x++; 
                $(wrapper).append(fieldHTML); 
            }
        });
    
        $(wrapper).on('click', '.remove_button', function (e) { 
            e.preventDefault();
            $(this).parents('div .trash').remove(); 
            x--; 
        });
    });
</script>

 

Tu Respuesta

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

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