estoy haciendo la edición de los productos con un formulario. He añadido una apartado en el formulario que se llama opciones, que eta conectado a una tabla realacionada con la de productos.
Bien, lo que he hecho es que en este campo podamos añadir 2 opciones más, es decir a cada producto le puedo tener 3 opciones. Esto esta echo con Javascritp.
$(document).ready(function() {
var MaxInputs = 2; //maximum extra input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
//on add input button click
$(AddButton).click(function (e) {
//max input box allowed
if(x <= MaxInputs) {
FieldCount++; //text box added ncrement
//add input box
$(InputsWrapper).append('<div style="position:relative;"><input type="text" class="form-control formNuevo marbTn2" name="opciones[]" id="field_'+ FieldCount +'"/> <a href="#" class="removeclass"><i class="far fa-trash-alt eye"></i></a></div>');
x++; //text box increment
$("#AddMoreFileId").show();
$('AddMoreFileBox').html("Add field");
// Delete the "add"-link if there is 3 fields.
if(x == 3) {
$("#AddMoreFileId").hide();
$("#lineBreak").html("<br>");
}
}
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
$("#AddMoreFileId").show();
$("#lineBreak").html("");
// Adds the "add" link again when a field is removed.
$('AddMoreFileBox').html("Add field");
}
return false;
})
});
Esto a la vez le añade un botón de eliminar a cada fila y una vez que hay 3 opciones ya no se pueden añadir más filas. Bien esto cuando guardo el producto lo hago del siguiente modo.
foreach($request->opciones as $key => $value){
$opt = new Opcion;
$opt->product_id= $id;
$opt->listado= $request->opciones[$key];
$opt->save();
}
Esa es la parte que me guarda las opciones en la tabla opciones. Bien pero a la hora de editar el producto necesito que me cargue dinamicamente las opciones que tiene el producto, del mismo modo, si hay 3 ya no se pueden añadir más, etc.. al final que tenga el mismo funcionamiento que crea el JavaScript. Esto como lo puedo hacer???? gracias.
Prueba
Intento de la siguiente forma, creando un ciclo y así que también incremente el valor de field_
. Si me saca los resultados, pero el javascript no detecta que hay elementos ya, entonces puedo seguir añadiendo dos elementos más y los que hay no los puedo borrar.
@php $number = 1;@endphp
<div id="InputsWrapper">
@forelse ($productos->opciones as $opt)
<div><input type="text" name="opciones[]" id="field_@php echo $number++ @endphp" value=" {{ $opt->listado }} " class="form-control formNuevo marbTn2"></div>
@empty
<div><input type="text" name="opciones[]" id="field_1" value="" class="form-control formNuevo marbTn2"></div>
@endforelse
</div>
<div id="AddMoreFileId">
<a href="#" id="AddMoreFileBox" class="btn btn-info pull-right addfila">Añadir fila</a><br><br>
</div>