0

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>

1 respuesta 1

1

Aparentemente sólo necesitas rescatar la cantidad de opciones que tiene cada producto. Algo que puedes hacer es tener un input oculto para guardar la cantidad, algo así:

<input type="hidden" id="cantidadOpciones" data-cantidad="{{ count($productos->opciones) }}">

<div id="InputsWrapper">
    ...         
</div>

Internamente, en tu Javascript, harías algo así:

...
var x = $("#cantidadOpciones").attr('data-cantidad'); // Cantidad actual de opciones del producto

// Si ya tiene las 3 opciones
// Ocultas el boton de agregar más

if(x == 3) {
    $("#AddMoreFileId").hide();
    $("#lineBreak").html("<br>");
}

//on add input button click
$(AddButton).click(function (e) {
...

Según la lógica que tienes, eso debería ser suficiente.

6
  • Gracias por tu respuesta @L. Flor , me sigue dejando crear dos, ya haya 1,2 o 3 opciones.
    – Miguel
    el 24 jun. 2020 a las 18:02
  • Al parecer FieldCount también debe ser actualizado, perdona, es que no me quedó muy claro para qué servía cada variable. el 24 jun. 2020 a las 18:04
  • Baje el var más abajo y ya no me deja añadir más si ya hay 3, y si solo hay dos solo me deja una. Pero hay algo que el javascript hacia, si ya hay 3 opciones el botón de añadir fila desaparecia y la primera opción no, pero las otras dos se pueden eliminar para cambiarlas, como puedo hacer que aparezca el botón de eliminar tal como actuaba el javascript? @L. Flor
    – Miguel
    el 24 jun. 2020 a las 18:10
  • Bueno lo del botón de eliminar lo arregle añadiendo esto que tenia el JavaScript en el input donde hacemos el foreach <a href="#" class="removeclass"><i class="far fa-trash-alt eye"></i></a> Solo faltaria ocultar el botón de añadir fila si es que ya hay 3 opciones. @L. Flor
    – Miguel
    el 24 jun. 2020 a las 18:36
  • Esa es una comparación que ya haces, sólo que también debes hacerla al inicio. Ya actualicé mi respuesta el 24 jun. 2020 a las 20:02

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.