1

Estoy realizando un formulario en donde la persona debe solicitar distintos materiales, quiero hacer esto en un solo formulario para no hacerlo 1 por 1. Pero llegue a un punto en donde no sé como solucionar el problema.

Tengo lo siguiente:

Blade:

<div id="formulario">
    <label for="Material">Material</label>
    <div class="input-group">
        <select name="inventario[]['nombre']" class="form-control col-md-6">
            @foreach ($inventario as $inventarios)
            <option value="{{ $inventarios->IdInventario }}">
                {{ $inventarios->Descripcion }}
            </option>
            @endforeach
        </select>
        <input type="number" class="form-control col-md-6 @error('Cantidad') is-invalid @enderror" name="inventario[]['cantidad']" placeholder="Cantidad a solicitar" required> @error('Cantidad')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>
</div>

<div id="clon"></div>

Script:

<script>
    $(document).ready(function() {
        $("#clonar").click(function() {
            $("#formulario").clone().appendTo("#clon");
        });
    }); 
</script>

Controlador:

public function save(Request $request){

        SolicitudMaterial::create([
            'NumeroSolicitud' => $request->NumSolicitud,
            'IdInventario' => $request->get('Material'),
            'Cantidad' => $request->Cantidad,
            'IdEstado' => 2,
        ]);
}

No he podido conseguir guardar esos items al momento, ya que solo se me guarda 1.

Así es cuando hay uno:

https://i.imgur.com/Ff6UGCc.png

Lo que quiero conseguir es guardar los que sean:

introducir la descripción de la imagen aquí

Leí que el name debe ser un array, pero lo que no logro es hacer una diferencia entre el formulario que ya está y los nuevos que se agregan ni tampoco leerlo en el controlador para poder guardarlo.

Sé que el método en el controlador esta malo y posiblemente haya que utilizar un foreach para recorrer los array, pero eso es lo que no sé como implementarlo.

1 respuesta 1

4

Lo que tenés que clonar es el .input-group, si clonas el #formulario vas a tener el ID repetido, lo cual no es válido.

Por otro lado, si bien los nombres de los campos tienen que ser arrays, si los armás como los tenés, vas a tener un problema. Cada vez que aparece un campo array (inventario[][nombre], inventario[][cantidad]) se le suma 1 a la clave, con lo cual terminás con un array del estilo:

inventario[0][nombre]
inventario[1][cantidad]
inventario[2][nombre]
inventario[3][cantidad]

Y no lo que estás esperando:

inventario[0][nombre]
inventario[0][cantidad]
inventario[1][nombre]
inventario[1][cantidad]

Podrías desde JS asegurarte de agregar el ID correspondiente, pero lo más fácil es simplemente usar nombres distintos: nombres[] y cantidades[]. De esa forma sabes que el nombre 0 corresponde a la cantidad 0.

$('.clonar').click(function() {
  // Clona el .input-group
  var $clone = $('#formulario .input-group').last().clone();

  // Borra los valores de los inputs clonados
  $clone.find(':input').each(function () {
    if ($(this).is('select')) {
      this.selectedIndex = 0;
    } else {
      this.value = '';
    }
  });

  // Agrega lo clonado al final del #formulario
  $clone.appendTo('#formulario');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="formulario">
  <label for="Material">Material</label>
  <button type="button" class="clonar btn btn-secondary btn-sm">+</button>
  <div class="input-group">
    <select name="nombres[]" class="form-control col-md-6">
      <option value="1">
        Material 1
      </option>
      <option value="2">
        Material 2
      </option>
    </select>
    <input type="number" class="form-control col-md-6 @error('Cantidad') is-invalid @enderror" name="cantidades[]" placeholder="Cantidad a solicitar" required>
  </div>
</div>

Controlador:

public function save(Request $request)
{
    // Recorre todos los "nombres" enviados, si no hay ninguno se
    //  crea un array vacío para que no devuelva un error el foreach
    foreach ($request->input('nombres', []) as $i => $nombre) {
        SolicitudMaterial::create([
            'NumeroSolicitud' => $request->NumSolicitud,
            'IdInventario'    => $nombre,
            'Cantidad'        => $request->input('cantidades.' . $i),
            'IdEstado'        => 2,
        ]);
    }
}
3
  • Muy completa tu respuesta, me ha servido, muchas gracias.
    – ScriptKash
    Commented el 21 oct. 2019 a las 13:39
  • Aunque quería saber si me podías ayudar con algo más, ya que a la hora de clonar, el campo de select se resetea y sale en blanco, me gustaría que se viera el nombre y no un espacio en blanco, ya que a nivel de diseño si afecta un poco la experiencia del usuario. i.imgur.com/JLRwNJH.png
    – ScriptKash
    Commented el 21 oct. 2019 a las 14:08
  • 1
    @ScriptKash ahí edité el código para que se seleccione la primera opción del select al clonar.
    – azeós
    Commented el 21 oct. 2019 a las 14:53

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.