0

Tengo esta vista y me gustaría saber como lleno los inputs cuando selecciono la opción del select que es de una tabla foránea, en la opcion del select esta la llave foránea y otro atributo de la tabla, pero no sé como poner esa informacion de los input cuando se selecciona la opcion del select.

Este es el codigo.

@extends('layouts.app1')
    @section('content')

    <div class="col-md-8 col-md-offset-2">
        @if (count($errors) > 0)
        <div class="alert alert-danger">
            <strong>Error!</strong> Revise los campos obligatorios.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        @if(Session::has('success'))
        <div class="alert alert-info">
            {{Session::get('success')}}
        </div>
        @endif
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Nuevo Mantenimiento</h3>
            </div>
            <div class="panel-body">
                <div class="table-container">
                    <form method="POST" action="{{ route('mantenimiento_pc.store') }}"  role="form">
                        {{ csrf_field() }}
                        <div >
                            <label for="computador_id">ID Computador:</label>
                            <select class="form-control input-sm" name="computador_id" id="computador_id"  onchange="selecOp(event.target.value)">>
                                <option disabled="true" selected="true">=== Select PC===</option>
                                @foreach($computador as $computadores)
                                <option modelo-pc="{{$computadores->modelo_pc}}" marca-pc="{{$computadores->marca_pc}}" value="{{$computadores->id}}">{{$computadores->nombre_pc}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="marca_equipo">Marca Equipo:</label>
                            <input type="text" name="marca_equipo" class="form-control input-sm" placeholder="Marca" id="marca_equipo" />

                        </div>
                        <div>
                            <label for="modelo">Modelo:</label>
                            <input id="modelo" class="form-control input-sm" type="text" placeholder="Modelo"  />
                        </div>
                        <div>
                            <label for="motivo">Motivo:</label>
                            <textarea type="text" name="motivo" id="motivo" cols="50" rows="10" class="form-control input-sm" placeholder="Motivo" style="resize: none"></textarea>
                        </div>

                        <div>
                            <label for="diagnostico">Diagnostico:</label>
                            <textarea type="text" name="diagnostico" id="diagnostico" cols="50" rows="10" class="form-control input-sm" placeholder="Diagnostico" style="resize: none"></textarea>
                        </div>
                        <div>
                            <input type="submit"  value="Guardar" class="btn btn-success btn-block">
                            <a href="{{ route('mantenimiento_pc.index') }}" class="btn btn-info btn-block" >Atrás</a>

                        </div>
                        <script>
                            var valorEnvio = ""
                            function selecOp(marca_pc) {


                                document.getElementById("marca_equipo").value = marca_pc,//declararle el valor del select al input
                                document.getElementById("modelo").value 
                            }
                            function obtenerValor() {
                                marca_pc = document.getElementById("marca_equipo").value //obtener valor del input
                                valorEnvio = marca//declarar valor a la variable a usar en el ajax
                                console.log(valorEnvio)
                           }



                        </script>
                </div>
            </div>

        </div>
    </div>
    @endsection
1
  • Hola. Entonces quieres, que de acuerdo a un primer parámetro seleccionado desde un select, se cargue un formulario dinámico (cuyos inputs varían segun lo seleccionado anteriormente) o me equivoco? Commented el 20 nov. 2018 a las 9:40

1 respuesta 1

0

Prueba algo así y no olvides borrar el evento onchange de computador_id. He simplificado el código pero tu puedes dejar lo que tienes.

computador_id.addEventListener("change", ()=>{
  let opt = computador_id.options[computador_id.selectedIndex];
  let elmodelo = opt.getAttribute("modelo-pc");
  modelo.value = elmodelo;
  let lamarca = opt.getAttribute("marca-pc");
  marca_equipo.value = lamarca;
})
<div class="col-md-8 col-md-offset-2">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Nuevo Mantenimiento</h3>
    </div>
    <div class="panel-body">
      <div class="table-container">
        <form method="POST" action="#" role="form">

          <div>
            <label for="computador_id">ID Computador:</label>
            <select class="form-control input-sm" name="computador_id" id="computador_id">
            <option disabled="true" selected="true">=== Select PC===</option>
            <option modelo-pc="modelo-pc 1" marca-pc="marca-pc 1" value="1">nombre 1</option>
            <option modelo-pc="modelo-pc 2" marca-pc="marca-pc 2" value="2">nombre 2</option>
            <option modelo-pc="modelo-pc 3" marca-pc="marca-pc 3" value="3">nombre 3</option>
        </select>
          </div>
          <div>
            <label for="marca_equipo">Marca Equipo:</label>
            <input type="text" name="marca_equipo" class="form-control input-sm" placeholder="Marca" id="marca_equipo" />

          </div>
          <div>
            <label for="modelo">Modelo:</label>
            <input id="modelo" class="form-control input-sm" type="text" placeholder="Modelo" />
          </div>

      </div>
    </div>

  </div>
</div>
1
  • Muchas gracias, me funciono a la perfección.
    – andres
    Commented el 20 nov. 2018 a las 17:15

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.