Skip to main content
Typo
Origen Enlace
azeós
  • 3k
  • 1
  • 8
  • 13

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 ala la clave, con lo cual terminás con un array del estilo:

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

  // Borra los valores de los inputs clonados
  $clone.find(':input').valeach(''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>

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 al la clave, con lo cual terminás con un array del estilo:

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

  // Borra los valores de los inputs clonados
  $clone.find(':input').val('');

  // 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>

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:

$('.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>
Origen Enlace
azeós
  • 3k
  • 1
  • 8
  • 13

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 al 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').val('');

  // 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,
        ]);
    }
}