0

Bueno yo agrego dinamicamente filas a una tabla html con jquery...pero ahora esas filas agregadas a esa tabla html, como enviarlos a mi base de datos??

Mi Código:

<form method="post" action="{{action('Empresa\Cliente@store')}}">
@csrf
<label>Código</label>
<input class="form-control" type="text" name="codigo" value="" id
="codigo">
{!!$errors->first('codigo', '<span class=error>:message</span>')!!}
<label>Nombre</label>
<input class="form-control" type="text" name="nombre" id="nombre">
{!!$errors->first('nombre', '<span class=error>:message</span>')!!}
<a href="javascript:;" id="agregar" class="btn btn-success">Agregar a tabla</a>

<table class="table table-bordered" id="tabla">
<thead class="table-dark">
<tr class="text-center">
<th>CODIGO</th>
<th>NOMBRE</th>
</tr>
</thead>
</table>
<button class="btn btn-success">Guardar a la BD</button>
</form>

<script type="text/javascript">
$('#agregar').click(function(){
agregar();
});

function agregar(){
var codigo=$('#codigo').val();
var nombre=$('#nombre').val();
var fila='<tr>'+
'<td>'+codigo+'</td>'+
'<td>'+nombre+'</td>'+
'</tr>';
$('#tabla').append(fila);
}
</script>

MI Controlador:

public function store(ClienteRequest $request)
    {
        return $request->all();
    }

Mi Request ClienteRequest:

public function rules()
    {
        return [
            'codigo' => 'required|integer',
            'nombre' => 'required|string'
        ];
    }

Entonces...como enviarlos??

1 respuesta 1

3

Puedes hacer la table dentro del form, y le vas agregando inputs en vez de strings. Al enviar el form, se enviarán los inputs que hayas agregado a la tabla. Solo ten en cuenta que al tener varios con el mismo nombre, el atributo name debe ser un array. Prueba algo así:

<label>Código</label>
<input class="form-control" type="text" name="codigo" value="" id="codigo">
{!!$errors->first('codigo', '<span class=error>:message</span>')!!}

<label>Nombre</label>
<input class="form-control" type="text" name="nombre" id="nombre">
{!!$errors->first('nombre', '<span class=error>:message</span>')!!}

<a href="javascript:;" id="agregar" class="btn btn-success">Agregar a tabla</a>

<form method="post" action="{{action('Empresa\Cliente@store')}}">
@csrf
    <table class="table table-bordered" id="tabla">
        <thead class="table-dark">
            <tr class="text-center">
                <th>CODIGO</th>
                <th>NOMBRE</th>
            </tr>
        </thead>
    </table>

    <button type="submit" class="btn btn-success">Guardar a la BD</button>
</form>

<script type="text/javascript">
    $('#agregar').click(function(){
        agregar();
    });

    function agregar(){
        var codigo=$('#codigo').val();
        var nombre=$('#nombre').val();
        var fila='<tr>'+
        '<td><input class="form-control" type="text" name="codigo[]" value="'+codigo+'" readonly></td>'+ 
        '<td><input class="form-control" type="text" name="nombre[]" value="'+nombre+'" readonly></td>'+ 
        '</tr>';

        $('#tabla').append(fila);
    }
</script>

Edit:

<script type="text/javascript">
    var table = $('#tabla');
    $('#agregar').click(function(){
        agregar();
    });

    function agregar(){
        var codigo=$('#codigo').val();
        var nombre=$('#nombre').val();
        var i = table.lenght + 1;
        var fila='<tr>'+
        '<td><input class="form-control" type="text" name="cliente['+i+'][codigo]" value="'+codigo+'" readonly></td>'+ 
        '<td><input class="form-control" type="text" name="cliente['+i+'][nombre]" value="'+nombre+'" readonly></td>'+ 
        '</tr>';

        table.append(fila);
    }
</script>

Para el back, puedes probar con esto:

Valida los array
ClienteRequest.php

public function rules()
{
    return [
        'cliente' => 'required|array|min:1',
        'cliente.*.codigo' => 'string',
        'cliente.*.nombre' => 'string',
    ];
}

No lo encuentro en la documentación, pero puedes usar insert

Controlador:

public function store(ClienteRequest $request)
{
    $data = $request->all();
    $cliente = Cliente::insert($data['cliente']);
    return $cliente;
}

Asegúrate de tener un modelo con los campos assignables

Modelo:

class Cliente extends Model
{
    protected $fillable = [
        'codigo', 'nombre'
    ];
}
9
  • que buena idea pero...si hago eso, al momento de enviar los datos se mandaran en 2 array, 1 array de solo nombres y otro solo codigos. Y lo que yo quisiera es que en el array se envien codigo y nombre :s (No se si me dejo entender) o la forma en la que me muestra asi es valido? Si me podria explicar por favor :s
    – Lalo Landa
    el 28 mar. 2019 a las 18:50
  • @LaloLanda mira la edición de la respuesta. Así creo que puedes enviar codigo y nombre con un índice para cada cliente el 28 mar. 2019 a las 19:22
  • amigo disculpa la demora, bueno he intentado hacer la parte nueva que me has enviado en la respuesta, pero parece que no funciona al momento de agregar una fila a tabla con jquery, pareciera que el var i esta mal o no se porque cuando lo borro recien funciona :s
    – Lalo Landa
    el 28 mar. 2019 a las 23:49
  • 1
    @LaloLanda ok, eso es como enviar desde el front. Prueba con mi segundo edit para llegar hasta la Base de Datos el 29 mar. 2019 a las 0:38
  • 1
    @LaloLandaerror mío, createMany es para crear objetos relacionados, prueba con insert el 29 mar. 2019 a las 17:46

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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