0

tengo dos problema tratando de implementar un función JavaScript en mi proyecto. *

Mi primer problema:

* - Actualmente la función que tengo me permite activar un select al introducir el numero "1" en el input con id=type. Lo que quiero es que ese valor me lo traiga de la Base de datos y según ese valor este activo o desactivado el select.

Este es mi formulario: (Para traer datos de la base de datos empleo @foreach ($nombre_dotacion as $ver))

<form action="{{ route ('asignacion_dotacion.store')}}" method="POST" name="fr">
    <tbody>
        <tr>
          <td>
          <input type="text" class="form-control" id="dotacion" name="dotacion[]" value="{{$ver->id}}. {{  $ver->name}}" readonly>
          </td>
          <td>
            <input type="text" class="form-control" id="cantidad_solicitada" name="cantidad_solicitada[]" value="{{  $ver->cantidad }}" readonly>
          </td>
          <td>
            <input type="text" class="form-control" id="cantidad_disponible" name="cantidad_disponible[]" value="{{ $ver->new_quantity }}" readonly>
          </td>
          <td>
            <input type="text" class="form-control" id="cantidad_asignada" name="cantidad_asignada[]" value="">
          </td>
          <div class="botones">
            <td>
              <input type="text" class="form-control" id="type" name="type[]" >
            </td>
          <td>
            <select  id="date" name="categoria" class="form-control" >
                <option selected>Seleccione...</option>
                <option value="1">Corto Plazo</option>
                <option value="2">Mediano Plazo</option>
                <option value="3">Largo Plazo</option>
            </select>
          </td>
        </div>
        </tr>
    </tbody>
</form>

Yo puedo traer la información de la base de datos de forma correcta. El problema es que la función me tome ese valor y no uno introducido por teclado.

Esta es la función Java Script que estoy empleando:

<script type="text/javascript">
    function validar(form) {
        if(type.value==1){
            variable2.disabled=false
        }
        else{
            variable2.disabled=true
        }
    }

    var variable2 = document.getElementById("date");
    variable2.disabled = true;
    var type =document.getElementById("type");
    type.onkeyup = validar;
</script>

Mi sengundo Problema

  • La función se ejecuta bien para el primer input y el primer select. Pero en mi tabla tengo varios registros y la función debe funcionar igual para todos.

2 respuestas 2

0

Lo que podrias hacer, es que directamente en el codigo, suponiendo que estas usando blade, comprobar si el valor esta en 1 o 0 para habilitar o no el selector, sin necesaidad de pasar por la funcion en javascript, al menos la primera vez.

<select  id="date" name="categoria" class="form-control" >
    <option>Seleccione...</option>
    <option value="1" @if ($ver->type == 1) selected="selected" @endif>Corto Plazo</option>
    <option value="2" @if ($ver->type == 2) selected="selected" @endif>Mediano Plazo</option>
    <option value="3" @if ($ver->type == 3) selected="selected" @endif>Largo Plazo</option>
</select>

Lo otro seria llamar a la funcion validar donde deberias setear el valor de var type ='{{$ver->type}}';

Todo este ejemplo suponiendo que el campo obtenido de la tabla se llama type

Sobre el segundo problema, lo que tendrias que hacer sería realizar una sola funcion donde pudieras obtener en los parametros el selector y el valor del input.

function cambiaselector(selectorid, inputvalue){
    var selector = $('#'+selectorid+'');
    if(inputvalue==1){
      selector.prop('disabled', false);
    } else {
      selector.prop('disabled', true);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Tipo 1<input type="text" id="type" onChange="cambiaselector('date', this.value)"><br>
Tipo 1<input type="text" id="type" onChange="cambiaselector('date2', this.value)"><br>
<hr>
Selector 1
<select  id="date" name="categoria" class="form-control" >
    <option>Seleccione...</option>
    <option value="1">Corto Plazo</option>
    <option value="2">Mediano Plazo</option>
    <option value="3">Largo Plazo</option>
</select>
<br>
Selector 2
<select  id="date2" name="categoria" class="form-control" >
    <option>Seleccione...</option>
    <option value="1">Corto Plazo</option>
    <option value="2">Mediano Plazo</option>
    <option value="3">Largo Plazo</option>
</select>

Si ingresas 1 el selector se habilitara, si ingresas otra cosa se deshabilitara. Espero te sirva

0

Mil gracias Jolsalazar, me fue de bastante utilidad tu ayuda. Al final, resolví sin utilizar javascript, y aproveche las ventajas de blade.

El formulario me quedo algo así:

@if ($valor0 === 2)
     <select  id="date" name="categoria[$i]" class="form-control" disabled>
     <option selected >Seleccione...</option>
     <option value="1">Corto Plazo</option>
     <option value="2">Mediano Plazo</option>
     <option value="3">Largo Plazo</option>
                                  </select>
@elseif ($valor0 === 1)
 <select  id="date" name="categoria[$i]" class="form-control">
 <option selected >Seleccione...</option>
 <option value="1">Corto Plazo</option>
 <option value="2">Mediano Plazo</option>
  <option value="3">Largo Plazo</option>
</select>                             
 @endif

Lo agregue como un partials a mi tabla. Y el valor lo busco en mi controlador y lo paso a la vista en la variable valor0.

Gracias!

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.