Filtrar formularios

loncho_rojas · #1 (**permalink**) 30/09/2009, 12:32

Me dijeron que el problema es Javascript, asi que lo expongo a continuacion, espero pueda expresarme bien.

Ya hice algo, y necesito conseguir otra cosa mas..

LO QUE YA HICE
Generar una mini funcion sencilla que me permita bloquear ciertos campos mediante unos radios.

Es decir, tengo 3 campos de form, 1 input y 2 combobox...

Cuando selecciono uno el radio 1, me habilita el campo Input y el combobox1, y deshabilita el combobox2.

Cuando selecciono uno el radio 2, me habilita el campo Input y el combobox2, y deshabilita el combobox1.

Hasta aca, como dirian, "todo chevere", pero esos campor serán enviados a un procesador..

lo que necesito tal vez no sea muy complicado, o tal vez si:

Problema

Quiero que al seleccionar uno de los radios, a parte de habilitarme los 2 necesarios y bloquearme uno de ellos, que solo envie la info dentro de los 2 campos habilitados, y el que esta deshabilitado me lo ignore.

Esto porque al enviar el form al procesador, por mas que esté deshabilitado uno de ellos, igual envia la info, y no quiero que eso pase..

les dejo copiado el html y javascript que use para ver si se entiende mas:

Código HTML:

<html>
	<head>

		<title>Buscar Avanzado</title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	</head>
     <script>
		function bloqueados(){
				
				document.form1.nombre.disabled = true
				document.form1.ciudad.disabled = true
				document.form1.edad.disabled = true
				}
		
		function bloquea() {
		
			if (document.form1.radio[0].checked) {
				document.form1.nombre.disabled = false
				document.form1.ciudad.disabled = false
				document.form1.edad.disabled = true
				document.form1.edad[document.form1.edad.selectedIndex].value=""
				
			}

			if (document.form1.radio[1].checked) {
			document.form1.nombre.disabled = false
			document.form1.edad.disabled = false
			document.form1.ciudad.disabled = true
			document.form1.ciudad[document.form1.ciudad.selectedIndex].value=""
			}
}
</script>

<body onLoad="bloqueados();">
<p>Seleccione una combinaci&oacute;n.
<p>Obs: Solo puede elegir una de ellas para filtrar los datos
    
   
    
<form name="form1" method="post" action="mostrarResultados.php">
  <table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td>Combinar solo</td>
            <td>&nbsp;</td>
            <td><input name="radio" type="radio" value="" onClick="bloquea()">
            nombre + ciudad            </td>
            <td>&nbsp;</td>
            <td><input name="radio" type="radio" value="" onClick="bloquea()">
              Nombre +Edad</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="144" bgcolor="#CCCCCC"><span class="style10">Nombre:</span>
            <input name="nombre" type="text" id="nombre"></td>
            <td width="21" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="187" bgcolor="#CCCCCC">+ Ciudad:
              <select name="ciudad" id="ciudad">
                <option value="0">-- Seleccione un Ciudad --</option>
                <option value="1">Ciudad 1</option>
                <option value="2">Ciudad 2</option>
              </select></td>
            <td width="37" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="158" bgcolor="#CCCCCC">+Edad:
              <select name="edad" id="edad">
                <option value="0">-- Seleccione edad --</option>
                <option value="1">Edad 17</option>
                <option value="2">Edad 18</option>
                <option value="3">Edad 19</option>
                <option value="4">Edad 20</option>
              </select></td>
            <td width="137">&nbsp;</td>
          </tr>
              
          <tr>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="144" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="21" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="187" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="37" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="158" bgcolor="#CCCCCC"><input name="Submit" type="submit" value="encontrar"></td>
            <td width="137">&nbsp;</td>
          </tr>
  </table>
</form>
      
      </body>
</html>

Zenkiu, si hay alguna duda me lo preguntan asi lo explico mejor, espero una mano, puesto que no soy muy fino con Javascript, mas que lo basico

Dano_Cuba · #2 (**permalink**) 30/09/2009, 14:04

Hola Loncho.

Mira, la verdad es que no entiendo a qué te refieres con "enviar la info al procesador"; me imagino que sea enviar los datos del campo al servidor que recibe el pedido web.

Si a eso te refieres, pues esa información no se envía cuando el campo está deshabilitado. Estaba seguro, pero igual hice la prueba. Lo hice con ASP pero con PHP es lo mismo. Te pongo el código. Si lo pruebas verás que si el campo edad está deshabilitado, aunque tenga valor no pasa a la otra página.

De hecho, cuando quieres que pase el valor de un campo que está deshabilitado, tienes que habilitarlo justo antes de enviar los datos al servidor.

Saludos,

Primera.asp (la misma que tu pagina):

Código Primera.asp:

Ver original<html>
    <head>
 
        <title>Buscar Avanzado</title>
 
        
    </head>
     <script>
        function bloqueados(){
                
                document.form1.nombre.disabled = true
                document.form1.ciudad.disabled = true
                document.form1.edad.disabled = true
                }
        
        function bloquea() {
        
            if (document.form1.radio[0].checked) {
                document.form1.nombre.disabled = false
                document.form1.ciudad.disabled = false
                document.form1.edad.disabled = true
                document.form1.edad[document.form1.edad.selectedIndex].value=""
                
            }
 
            if (document.form1.radio[1].checked) {
            document.form1.nombre.disabled = false
            document.form1.edad.disabled = false
            document.form1.ciudad.disabled = true
            document.form1.ciudad[document.form1.ciudad.selectedIndex].value=""
            }
}
</script>
 
<body onLoad="bloqueados();">
<p>Seleccione una combinaci&oacute;n.
<p>Obs: Solo puede elegir una de ellas para filtrar los datos
    
   
    
<form name="form1" method="post" action="Segunda.asp">
  <table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td>Combinar solo</td>
            <td>&nbsp;</td>
            <td><input name="radio" type="radio" value="" onClick="bloquea()">
            nombre + ciudad            </td>
            <td>&nbsp;</td>
            <td><input name="radio" type="radio" value="" onClick="bloquea()">
              Nombre +Edad</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="144" bgcolor="#CCCCCC"><span class="style10">Nombre:</span>
            <input name="nombre" type="text" id="nombre"></td>
            <td width="21" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="187" bgcolor="#CCCCCC">+ Ciudad:
              <select name="ciudad" id="ciudad">
                <option value="0">-- Seleccione un Ciudad --</option>
                <option value="1">Ciudad 1</option>
                <option value="2">Ciudad 2</option>
              </select></td>
            <td width="37" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="158" bgcolor="#CCCCCC">+Edad:
              <select name="edad" id="edad">
                <option value="0">-- Seleccione edad --</option>
                <option value="1">Edad 17</option>
                <option value="2">Edad 18</option>
                <option value="3">Edad 19</option>
                <option value="4">Edad 20</option>
              </select></td>
            <td width="137">&nbsp;</td>
          </tr>
              
          <tr>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="144" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="21" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="187" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="37" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="158" bgcolor="#CCCCCC"><input name="Submit" type="submit" value="encontrar"></td>
            <td width="137">&nbsp;</td>
          </tr>
  </table>
</form>
      
      </body>
</html>

Segunda.asp:

Código:

<%
	nombre = Request("nombre")
	edad = Request("edad")
%>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La Segunda</title>
</head>

<body>
	<form id="formaSegunda">
		Nombre: <input type="text" id="name" value=<%=nombre%> />
		<br/>
		<br/>
		Edad: <input type="text" id="edad" value=<%=edad%> />		
	</form>

<body/>

</html>

loncho_rojas · #3 (**permalink**) 30/09/2009, 19:29

Cierto.. es que en primera instancia no me lo bloqueaba, ahora si, recuerdo que lo modifique antes de levantarlo al foro.. funciona perfecto, gracias por tomerte el tiempo de mirarlo... espero que a otro le sirva tambien