2

La cuestión es la siguiente tengo un simple formulario de ordenes de trabajo, en este caso a modo de prueba estoy creando una nueva orden, como tengo un solo archivo blade para la creación y edición de las ordenes de trabajo lo que quiero lograr es habilitar input text MOTIVO solo si se selecciona la opcion NO TERMINADO de mi select ,este campo status tiene 3 opciones: "en proceso", "terminado" y "no terminado".**

Esta es una imagen de mi formulario actualmente:

Orden

como se puede observar en la imagen quiero habilitar el input motivo solo si selecciona la opcion NO TERMINADO

Este es mi modelo:


class Order extends Model implements Auditable
{

    protected $fillable = ['client_id', 'user_id', 'num', 'name_product', 'status', 'date'];

    public $timestamps = true;  

    protected $dates = ['date'];

    protected $status = [
        'EN PROCESO'    => 'En proceso',
        'TERMINADO'     => 'Terminado',
        'NO TERMINADO'  => 'No terminado'
    ];    

    public function getStatus()
    {
        return $this->status;
    } 

Este es mi OrderController:

  public function create()
    { 
        $order = new Order();      

        $this->authorize('create', $order);


        return view('admin.orders.partials.form', [
            'clients'   => Client::all(),
            'users'     => User::NotRole(['Admin', 'Supervisor'])->get(),
            'products'  => Order::pluck('name_product', 'name_product'),
            'order'     => $order
        ]);  

    }

public function edit($id)
    {   
        $order = Order::findOrFail($id);

        $this->authorize('update', $order);            

        return view('admin.orders.partials.form', [
            'clients'   => Client::all(),
            'users'     => User::NotRole(['Admin', 'Supervisor'])->get(),
            'products'  => Order::pluck('name_product', 'name_product'),
            'order'     => $order
        ]);        

    }    

archivo blade:

Bueno en esta parte quiero aplicar la lógica si el usuario selecciona la opcion NO TERMINADO se deberia habilitar el input text Motivo Asi es como lo estoy intentando pero no me funciona Como obtengo la opcion seleccionada de mi select para asi poder realizar la verificacion?

<div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Detalle de la orden</h3>                
            </div>
            <div class="box-body">

                <div class="form-group">              
                    {!! Form::label('status', 'Estado') !!}                         
                    {!! Form::select('status', $order->getStatus(), '[0]', ['class' => 'form-control', 'id' => 'status']) !!}                                                 
                </div>

                <div class="form-group">
                    {!! Form::label('reason', 'Motivo') !!}
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </div>      
                        @if ( $order->getStatus('[2]') === 'NO TERMINADO')              
                        {!! Form::text('reason', null, ['class' => 'form-control', 'id' => 'reason', 'placeholder' => 'Motivo']) !!}
                        @else
                        {!! Form::text('reason', null, ['class' => 'form-control', 'id' => 'reason', 'disabled' => 'disabled', 'placeholder' => 'Motivo']) !!}
                        @endif
                    </div>
                </div>    

Bueno espero que me puedan ayudar con este cambio que le quiero realizar a mi formulario. Gracias por su tiempo voy a estar atento a sus comentarios! Saludos!!

3
  • Existe alguna manera de realizar esa comprobación en mi vista balde ? O como realizarlo en el controlador ? Commented el 23 dic. 2019 a las 11:22
  • Con el atributo disabled deshabilitas un input, condiciónalo desde tu script Commented el 24 dic. 2019 a las 14:34
  • 1
    me parece demasiado rebuscada la forma en que lo haces, cuando con JS sería mas simple
    – user128299
    Commented el 25 dic. 2019 a las 15:06

1 respuesta 1

6

Creo que la opción mas natural y funcional en este caso es manejarlo a través de JS, del modo siguiente:

  • Desde el HTML agrégale a tu etiqueta input el atributo disabled para que por default este deshabilitada y solo se vuelva a habilitar mediante la lógica que se escriba en JS
  • Cada elemento involucrado agrégale un id tanto para el input como para la etiqueta select
  • Obtén por medio de su id y asignalo a una variable al select para que después por medio de su evento change verifiquemos el valor que el usuario elige de la lista desplegable
  • Por medio de un condicional simple if else verificamos si la propiedad value es igual a 2 por ejemplo y con base en eso....
  • Si el valor elegido es 2 entonces la propiedad disabled la pasamos a false
  • En caso contrario a la condición anterior mantenemos la propiedad disabled en true

Ejemplo

El siguiente ejemplo es fácil de adaptar tan solo ten en cuenta:

  • Los nombres de los id
  • El código JS que recupera en las variables los valores de los nodos HTML

Código

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo 1</title>
    </head>
    <body>
    <form action="#">
      Valor 1 <input id="deshabilitado" disabled type="text" />
      <p>Selecciona la opción 2 para habilitar</p>
      <select name="" id="opciones">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </form>
    <script>
        let opcion = document.getElementById("opciones")
        let caja   = document.getElementById("deshabilitado")
        
        opcion.addEventListener("change", () => {
          let elementoElegido = opcion.options[opcion.selectedIndex].value
          if (elementoElegido === "2") {
            caja.disabled = false
          } else {
            caja.disabled = true
          } 
        })
    </script>
    </body>
    </html>

Nota importante

Si la comprobación la quieres realizar a nivel del texto que esta entre las etiquetas de apertura y cierre option, entonces sustituye el uso de .value por .text

Referencias

2
  • si realmente es rebuscado pero no se me ocurría otra manera . Gracias por responder luego pruebo y comento Commented el 25 dic. 2019 a las 17:39
  • 1
    Muchas gracias me sirvió de mucho tu ejemplo Commented el 25 dic. 2019 a las 21:00

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.