Guardar filas de tabla html a base de datos Laravel

publicado por: Anonymous

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('[email protected]')}}">
@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??

solución

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('[email protected]')}}">
@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'
    ];
}
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *