1

Hola como estan el problema que tengo es como hacer que un texbox sea visible dependiedno del valor de una lista depegable,

adjunto el codigo de la vista

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Proyecto Empresa | Usuarios</title>
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css">
<style type="text/css">
body {
padding-top: 60px;
}
.contenido{
padding: 10px;
}
</style>
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="<?= base_url('usuarios')?>">Usuarios</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Operaciones<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Reportes Mensual</a></li>
<li><a href="#">Reportes Anual</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Mantenimiento<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a  href="#">Usuarios</a></li>
<li><a href="#">Clientes</a></li>
</ul>
</li>
<li><a href="#contact">Indicadores</a></li>
<li><a href="#contact">Cuadro de Mando</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">

<i class="fa fa-user fa-fw"></i> <?= $this->session->userdata('name')?><b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user fa-fw"></i>Perfil</a></li>
<li><a href="javascript:void(0)" id="cerrar"><i class="fa fa-sign-out fa-fw"></i> Cerrar Sesion</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<div class="container">

<section class="contenido">
<div class="row">



<div class="tab-content">
              <div class="tab-pane active" id="tab3">

                <br>
<div class="row">
<div id="listaEmpleados" class="col-lg-8">

</div>
<div class="col-lg-12">
    <div class="panel panel-default">

        <div class="panel-body">

<form id="form-actualizar" class="form-horizontal" action="<?php echo base_url();?>usuarios/guardar" method="POST" role="form" style="padding:0 10px;">

                <div class="form-group">
                    <label class="col-lg-1">Modalidad:</label>
                    <div class="col-md-2">
                    <select name="Categorias" class="form-control">
                        <option value="" selected="" disabled="">Elija una Opcion</option>
                    <?php

                    foreach ($datos as $i => $categoria){

                       echo '<option value="'.$i.'">'.$categoria.'</option>';
                     }

                    ?>
                    </select>

                    </div>

                </div>



<div class="form-group">
                    <label class="col-lg-1">Estado de curso:</label>
                    <div class="col-md-2">
                    <select name="estado" class="form-control">
                        <option value="" selected="" disabled="">Elija una Opcion</option>
                        <option value="1" >Planeado</option>
                        <option value="2">Eljecutado</option>

                    </select>

                    </div>

                </div>

  <div class="form-group">
    <label for="ejemplo_email_1">N de desertores</label>
    <input type="text" class="form-control" name="deser" >
  </div>

  <div class="form-group">
    <label for="ejemplo_password_1">N de facilitadores</label>

<?php 

if ($datos==="Autoestudio") {
?>
  <input type="text" class="form-control" name="facil"  value="N/A" disabled >
<?php

} else {
?>
  <input type="text" class="form-control" name="facil"  >
<?php
}


 ?>


  </div>


                <div class="form-group">
                    <button type="submit" id="btnactualizar" class="btn btn-success btn-block">Guardar</button>

                </div>
            </form>

        </div>
    </div>

</div>

</div>

</div>

</div>


</div>

</section>

</div>

<script src="<?php echo base_url();?>assets/js/jquery-1.11.3.min.js"></script>
<script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>assets/js/usuarios.js"></script>
<script src="<?php echo base_url();?>assets/js/login.js"></script>
</body>
</html>
</body>
</html>

por ejemplo quiero que cuando este el combo seleccionado en autoestudio se desabilite el textbox numero de facilitadores.asi como en el ejemplo

introducir la descripción de la imagen aquí

Avance un poco ...

Aqui esta la vista que va a quedar

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Proyecto Empresa | Usuarios</title>
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css">
<style type="text/css">
body {
padding-top: 60px;
}
.contenido{
padding: 10px;
}
</style>
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Intergrupo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="<?= base_url('usuarios')?>">Usuarios</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Operaciones<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Reportes Mensual</a></li>
<li><a href="#">Reportes Anual</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Mantenimiento<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a  href="#">Usuarios</a></li>
<li><a href="#">Clientes</a></li>
</ul>
</li>
<li><a href="#contact">Indicadores</a></li>
<li><a href="#contact">Cuadro de Mando</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">

<i class="fa fa-user fa-fw"></i> <?= $this->session->userdata('name')?><b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user fa-fw"></i>Perfil</a></li>
<li><a href="javascript:void(0)" id="cerrar"><i class="fa fa-sign-out fa-fw"></i> Cerrar Sesion</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<div class="container">

<section class="contenido">
<div class="row">



<div class="tab-content">
              <div class="tab-pane active" id="tab3">

                <br>
<div class="row">
<div id="listaEmpleados" class="col-lg-8">

</div>
<div class="col-lg-12">
    <div class="panel panel-default">

        <div class="panel-body">

<form id="form-actualizar" class="form-horizontal" action="<?php echo base_url();?>usuarios/guardar" method="POST" role="form" style="padding:0 10px;">

                <div class="form-group">
                    <label class="col-lg-1">Modalidad:</label>
                    <div class="col-md-2">
                    <select name="Categorias" class="form-control" class="Categorias">
                        <option value="" selected="" disabled="">Elija una Opcion</option>
                    <?php

                    foreach ($datos as $i => $categoria){

                       echo '<option value="'.$i.'">'.$categoria.'</option>';
                     }

                    ?>
                    </select>

                    </div>

                </div>



<div class="form-group">
                    <label class="col-lg-1">Estado de curso:</label>
                    <div class="col-md-2">
                    <select name="estado" class="form-control" id="estado">
                        <option value="" selected="" disabled="">Elija una Opcion</option>
                        <option value="1" >Planeado</option>
                        <option value="2">Eljecutado</option>

                    </select>

                    </div>

                </div>

                <script type="text/javascript">

$(function(){
$(".Categorias").on('click',function(e){
e.preventDefault();
var _form=$(".form-actualizar");
$.ajax({
url:base_url+'usuarios/getModalidad',
type:'POST',
dataType:'json',
data:_form.serializeArray(),

})
.done(function(response){




})



})





})



                </script>

  <div class="form-group">
    <label for="ejemplo_email_1">N de desertores</label>
    <input type="text" class="form-control" name="deser" >
  </div>

  <div class="form-group">
    <label for="ejemplo_password_1">N de facilitadores</label>

<?php 

if ($datos==="Autoestudio") {
?>
  <input type="text" class="form-control" name="facil"  value="N/A" disabled >
<?php

} else {
?>
  <input type="text" class="form-control" name="facil"  >
<?php
}


 ?>


  </div>


                <div class="form-group">
                    <button type="submit" id="btnactualizar" class="btn btn-success btn-block">Guardar</button>

                </div>
            </form>

        </div>
    </div>

</div>

</div>

</div>

</div>


</div>

</section>

</div>

<script src="<?php echo base_url();?>assets/js/jquery-1.11.3.min.js"></script>
<script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>assets/js/usuarios.js"></script>
<script src="<?php echo base_url();?>assets/js/login.js"></script>
</body>
</html>
</body>
</html>

aqui esta el modelo

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Usuarios_model extends CI_Model {

  function guardar($data){

    $this->db->insert("cmi_curs_regi", $data);
    if ($this->db->affected_rows() > 0) {
      return true;
    }
    else{
      return false;
    }

  }

  public function get_categorias(){
      $query = $this->db->query('SELECT COD_MODA,NOM_MODA FROM cmi_moda');


    if ($query->num_rows()>0)
        foreach($query->result() as $row){

   $datos[($row->COD_MODA)] = $row->NOM_MODA;


}
        $query->free_result();//libera la memoria despues de usar el foreach cuando se tiene bastante data
        return $datos;



}



      public function getModalidad($consulta){

   $query = $this->db->query('SELECT NOM_MODA FROM cmi_moda where COD_MODA=.$consulta.');

    if ($query->num_rows()>0)
        foreach($query->result() as $row){

   $datos[($row->NOM_MODA)] ;


}
        $query->free_result();//libera la memoria despues de usar el foreach cuando se tiene bastante data
        return $datos;
        var_dump($datos);


    }




}

Aqui esta el controlador

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Usuarios extends CI_Controller {

    public function __construct(){
        parent::__construct();
        $this->load->model('Usuarios_model');

    }
                public function index(){

                  $data['datos'] = $this->Usuarios_model->get_categorias();

                  $this->load->view('frontend/usuarios',$data);

                 }

            public function guardar(){

            $estado = $this->input->post("estado");
            $deser = $this->input->post("deser");
            $facil = $this->input->post("facil");
            $categorias = $this->input->post("Categorias");


            $data = [
            "EST_CURS_REGI"=>$estado,   
            "NUM_DESE"=>$deser,
            "NUM_FACI"=>$facil ,
            "CMI_MODA_COD_MODA" =>$categorias];

            //print_r ($data);

                if ($this->Usuarios_model->guardar($data) == true) {
                    //redirect('usuarios');
                }




        }



            public function getModalidad(){

            $_name=$this->input->post('Categorias');
            $consulta = [
            "CMI_MODA_COD_MODA" =>$categorias];

        if ($this->Usuarios_model->guardar($data) == true) {
                    return $datos;
                echo    var_dump($datos);
                }


        }



}

Mi estrategia es como solo voy a querer esos datos de esa parte envio esa parte del formulario por ajax que pase al controlador y que le haga la consulta al modelo estara bien?

Funciona de esta manera

<script >

$(function(){
                $("#Categorias").on('change',function(e){

                  if($("#Categorias").val()==="1"){
                  $("#prueba1").attr("disabled",true); 
                  $("#prueba1").val("N/A");

                  }else{

                    $("#prueba1").attr("disabled",false);
                    $("#prueba1").val("");

                  }


})

});



                </script>

1 respuesta 1

1

Lo que quieres lograr se puede hacer con javascript directamente, o mas fácil con jquery, a continuación te dejo un ejemplo básico, puedes acoplarlo a tus necesidades:

$("#prueba").change(function(){
  
  if($("#prueba").val()==="-1"){
    $("#prueba1").prop("disabled",false); //Esta linea sirve si solo quieres deshabilitar la entrada de texto
    $("#prueba1").val("");
    //$("#prueba1").show(); //Esta linea sirve si quieres ocultar el input text
  }else{
    $("#prueba1").prop("disabled","disabled");
    $("#prueba1").val("Deshabilitado");
    //$("#prueba1").hide();
  }
  
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ocultar</title>
</head>
<body>
  <select name="prueba" id="prueba">
    <option value="-1">Seleccione</option>
    <option value="0">Cero</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
  </select>
  <input type="text" id="prueba1">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

3
  • es que el valor de los combos estan siendo cargados desde base de datos
    – user11261
    el 22 ago. 2016 a las 23:07
  • me funciono con tu codigo, lo modifique un poquito pero funciona <script > $(function(){ $("#Categorias").on('change',function(e){ if($("#Categorias").val()==="1"){ $("#prueba1").attr("disabled",true); $("#prueba1").val("N/A"); }else{ $("#prueba1").attr("disabled",false); $("#prueba1").val(""); } }) }); </script>
    – user11261
    el 23 ago. 2016 a las 1:12
  • Me alegro que te haya servido :-), esa era la idea, que lo implementes de acuerdo a tu necesidad. el 23 ago. 2016 a las 1:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.