Ejecutar Función dependiendo del Radiobutton en mi BD

Briss · #1 (**permalink**) 19/12/2012, 18:19

Hola a todos tengo una consulta donde obtengo el valor de un Radiobutton (No o Si)
almacenado en mi BD para lo cual he hecho lo siguiente:

Código PHP:

 
 <input type="radio" name="beca" value="Si" <?php echo $row_alumnos['Beca'] == "Si"?"checked = 'checked'":'';?> >Si 
 
<input type="radio" name="beca" value="No"  <?php echo $row_alumnos['Beca'] == "No"?"checked = 'checked'":'';?> >No

Funciona Bien ya que dependiendo del registro seleccionado arroja en el radiobutton NO o Si segun sea el caso....

ahora tengo otros inpust los cuales quiero que queden deshabilitados si el valor del radiobutton beca es No...
en caso de que el valor sea SI mostrarlos habilitados

Hice las siguientes Funciones

Código HTML:

<script>
function habilita1(){ 
    document.form1.tipo.disabled = false; 
    document.form1.estatusb.disabled = false; 
    document.form1.porcentaje.disabled = false; 
   } 
   
function habilita2(){ 
    document.form1.tipo.disabled = true; 
    document.form1.estatusb.disabled = true; 
    document.form1.estatusb.value = ""; 
   document.form1.porcentaje.disabled = true; 
	
   } 
        </script>

Y se me hizo facil llamar al evento asi

Código PHP:

 
<input type="radio" name="beca" value="Si" <?php echo $row_alumnos['Beca'] == "Si"?"checked = 'checked'":'';?> onClick="habilita1()">Si 
 
<input type="radio" name="beca" value="No"  <?php echo $row_alumnos['Beca'] == "No"?"checked = 'checked'":'';?> onClick="habilita2()">No

Mediante OnClick

Por logica para que las funciones realicen su cometido tengo que dar clic en el radiobutton (Si o No).... y no lo hace ya con el valor que obtiene de la consulta a mi BD , que es lo que realmente necesito

Agradesco de antemano cualquier ayuda

Briss · #2 (**permalink**) 20/12/2012, 10:46

He estado leyendo y creo que debo usar Onload pero no se como cambiar la funcion...

RabidFish · #3 (**permalink**) 20/12/2012, 11:15

Hola Briss.

Te dejo un código de ejemplo donde el alumno no tiene beca ($row_alumnos['beca'] = 'no';) y los campos están deshabilitados por defecto, pero al hacer clic en "Sí" se habilitan. Vos después lo adaptás bien a tu web.

Código PHP:

  <?php
    $row_alumnos = array();
    $row_alumnos['beca'] = 'no';
?>
<html>
    <head>
        <script type="text/javascript">
            // Selecciono los elementos <input /> por su atributo "name"
            var tipo = document.getElementsByName('tipo');
            var estatusb = document.getElementsByName('estatusb');
            var porcentaje = document.getElementsByName('porcentaje');
            
            function habilitar() {
                // Habilito los elementos
                tipo[0].disabled = false;
                estatusb[0].disabled = false;
                porcentaje[0].disabled = false;
            } 

            function deshabilitar() {
                // Deshabilito los elementos
                tipo[0].disabled = true;
                estatusb[0].disabled = true;
                porcentaje[0].disabled = true;
                
            }
        </script>
    </head>
    
    <body>
        <input type="radio" name="beca" value="si"<?php echo $row_alumnos['beca'] == "si" ? ' checked="checked"' : '';?> onclick="habilitar();">Si
        <input type="radio" name="beca" value="no"<?php echo $row_alumnos['beca'] == "no" ? ' checked="checked"' : '';?> onclick="deshabilitar();">No
        <br />
        <br />
        <?php // Si al cargar la página el alumno no tiene beca, entonces por defecto los campos están deshabilitados ?>
        Tipo: <input type="text" name="tipo"<?php echo $row_alumnos['beca'] == "no" ? ' disabled="disabled"' : '';?> /><br />
        Estatus B: <input type="text" name="estatusb"<?php echo $row_alumnos['beca'] == "no" ? ' disabled="disabled"' : '';?> /><br />
        Porcentaje: <input type="text" name="porcentaje"<?php echo $row_alumnos['beca'] == "no" ? ' disabled="disabled"' : '';?> /><br />
    </body>
</html>

Espero que te sirva. Un saludo.

Briss · #4 (**permalink**) 20/12/2012, 13:01

Gracias Funciona bien si el alumno no tiene beca apraceren deshabilitados los inpus

y bueno deje mi funcion en Si OnClick="habilita1()"

y se vuelven a habilitar :)

Solo que en el select me gustaría que al desahabilitarlo salgo en blanco (NO cargado con las opciones de mi consulta)

Lo tengo asi

Código PHP:

 
<select name="estatusb"<?php echo $row_alumnos['Beca'] == "No" ? ' disabled="disabled"' : '';?> style="width:232px"> 
          <?php  
do {   
?> 
          <option value="<?php echo $row_estatusb['estatus']?>" <?php if (!(strcmp($row_alumnos['EstatusB'], $row_estatusb['estatus']))){echo "SELECTED";} ?>><?php echo $row_estatusb['estatus']?></option> 
          <?php 
} while ($row_estatusb= mysql_fetch_assoc($estatusb)); 
?> 
        </select>

<?php echo $row_alumnos['Beca'] == "No" ? ' disabled="disabled"' : '';?> aqui puedo poner algo para limpiarlo

en mi funcion tenia algo asi

document.form1.estatusb.value = "";

y salia vacio

pero no se como limpiarlo con php es decir en esta linea

Código PHP:

<?php echo $row_alumnos['Beca'] == "No" ? ' disabled="disabled"' : '';?>

RabidFish · #5 (**permalink**) 20/12/2012, 16:15

Me alegro que te haya servido, Briss.

Una opción sería cargar un <option> en blanco antes de imprimir los demás:

Código PHP:

  <option value="0">&nbsp;</option>

Y en JavaScript seleccionar esa opción al deshabilitar los campos:

Código PHP:

  estatusb[0].selectedIndex = 0;

// También podrías deshabilitar el <select> y con eso te aseguras de que no se seleccione ninguna opción
estatusb[0].disabled = true;

Pero siempre estaría esa opción en blanco en el desplegable. Podés mejorarlo un poco haciendo que se seleccione la primera opción luego del <option> vacío en caso de que el alumno tenga beca.

Otra alternativa es la siguiente:

Código PHP:

  <script type="text/javascript">
    // Selecciono los elementos <input /> por su atributo "name"
    var tipo = document.getElementsByName('tipo');
    var estatusb = document.getElementsByName('estatusb');
    var porcentaje = document.getElementsByName('porcentaje');
    
    function habilitar() {
        // Habilito los elementos
        tipo[0].disabled = false;
        estatusb[0].innerHTML = '<option>Acá el HTML de los option generado con PHP</option>';
        estatusb[0].disabled = false;
        porcentaje[0].disabled = false;
    } 

    function deshabilitar() {
        // Deshabilito los elementos
        tipo[0].disabled = true;
        estatusb[0].disabled = true;
        estatusb[0].options.length = 0; // Elimino todos los <option> y dejo el <select> en blanco
        porcentaje[0].disabled = true;
        
    }
</script>

Pero deberías imprimir con PHP los option en el código JavaScript, y depende de cómo tengas armada tu plantilla puede resultar muy incómodo. Tampoco estoy seguro si .innerHTML está soportado por todos los navegadores. Si utilizas jQuery y AJAX todo eso se soluciona.

Te recomiendo que donde imprimes SELECTED pongas selected="selected" para que el código HTML que generas sea válido.

Saludos.

Briss · #6 (**permalink**) 20/12/2012, 16:52

Gracias por tu ayuda