Formulario html + radio y validar con javascript
Estoy creando un formulario de contacto con HTML e implementé un JQuery que rellenaba automáticamente la palabra buscada (en mi caso serán nombres).
Mi problema es el siguiente:
Tengo un Form con 2 radios (hombre y mujer), y lo que quiero es que si se selecciona el radio de hombre, el javascript me muestre solo nombres de hombres, y en caso de que se seleccione mujer, el javascript me muestre solo nombres de mujer.
Mi problema es el siguiente:
Tengo un Form con 2 radios (hombre y mujer), y lo que quiero es que si se selecciona el radio de hombre, el javascript me muestre solo nombres de hombres, y en caso de que se seleccione mujer, el javascript me muestre solo nombres de mujer.
1 respuesta
Respuesta de neicos
1
Primero de todo tendrás que plantear la forma de reconocer si el nombre que corresponde con la búsqueda es de hombre o mujer ya sea de la BBDD o de un Array desde JavaScript, etc.., puedes hacerlo con un valor añadido al nombre, como 0 es hombre y 1 mujer, por ejemplo...
Necesitas un input text, por ejemplo para que te muestre los resultados de los nombres y que el usuario vaya escribiendo en este mismo lo que quiere buscar estilo Google, ¿no?
para ello en el input text tienes que agregarle el evento onChange="cambia();"
cuando se produzca una variación en éste input llama a la función JavaScript cambia();
Dentro de esta función puedes comprobar si es hombre o mujer, para hacer dicha búsqueda de nombre con:
if(document.getElementById('hombre').checked){
..... sentencias si es hombre el radio llamado hombre
}
if(document.getElementById('mujer').checked){
..... sentencias si es mujer el radio llamado mujer
}
Las sentencias irán las llamadas a un AJAX o una implementación de JavaScript.
Necesitas un input text, por ejemplo para que te muestre los resultados de los nombres y que el usuario vaya escribiendo en este mismo lo que quiere buscar estilo Google, ¿no?
para ello en el input text tienes que agregarle el evento onChange="cambia();"
cuando se produzca una variación en éste input llama a la función JavaScript cambia();
Dentro de esta función puedes comprobar si es hombre o mujer, para hacer dicha búsqueda de nombre con:
if(document.getElementById('hombre').checked){
..... sentencias si es hombre el radio llamado hombre
}
if(document.getElementById('mujer').checked){
..... sentencias si es mujer el radio llamado mujer
}
Las sentencias irán las llamadas a un AJAX o una implementación de JavaScript.
Muchas gracias por responder, pero sigo sin poder hacerlo!
Mira, el código que tengo es el siguiente:
HTML:
<form action="send.php" method="post" name="formulario" id="formulario" onSubmit="javascript:return validate('form_id','email');">
<div class="pack"><div class="items">Sexo:</div><div class="inputs">
<input type="radio" id="sexo" for="sexo" name="sexo" value="Hombre" onChange="cambia();">Hombre
<input type="radio" id="sexo" for="sexo" name="sexo" value="Mujer" onChange="cambia();">Mujer</div></div>
#############################
cambia.js:
function (cambia){
if(document.getElementById('hombre').checked){
alert("hombre")
}
if(document.getElementById('mujer')
alert("mujer")
}
}
Mil gracias por tu ayuda!
Mira, el código que tengo es el siguiente:
HTML:
<form action="send.php" method="post" name="formulario" id="formulario" onSubmit="javascript:return validate('form_id','email');">
<div class="pack"><div class="items">Sexo:</div><div class="inputs">
<input type="radio" id="sexo" for="sexo" name="sexo" value="Hombre" onChange="cambia();">Hombre
<input type="radio" id="sexo" for="sexo" name="sexo" value="Mujer" onChange="cambia();">Mujer</div></div>
#############################
cambia.js:
function (cambia){
if(document.getElementById('hombre').checked){
alert("hombre")
}
if(document.getElementById('mujer')
alert("mujer")
}
}
Mil gracias por tu ayuda!
Primero de todo tienes que tener pensado la forma de recoger la lista de nombres, si es a través de una base de datos, en tu caso como usas php, la forma de poderlo utilizar es con AJAX o si tienes una tabla de nombres en JavaScript.
Cuando recojas la lista según lo escrito en el textbox y del sexo, tendrás que mostrarlo en alguna lista, div, etc...
Recorrer la lista comparando con lo introducido para ajustarse más a lo introducido... esas son pautas generales para el funcionamiento.
Cuando recojas la lista según lo escrito en el textbox y del sexo, tendrás que mostrarlo en alguna lista, div, etc...
Recorrer la lista comparando con lo introducido para ajustarse más a lo introducido... esas son pautas generales para el funcionamiento.
La verdad es que nunca usé ajax, tenía pensado en hacerlo todo con Javascript y html.
¿No hay forma de hacerlo solo con Javascript? La idea la tengo clara, pero no se como plasmarla en el código.
Saludos!
¿No hay forma de hacerlo solo con Javascript? La idea la tengo clara, pero no se como plasmarla en el código.
Saludos!
La verdad que por supuesto lo puedes hacer solo con JavaScript, lo que pasa, que si vas a cargar nombres de hombre y mujer, vas a cargar muchos datos en memoria, a no ser que que no sean muchos.
Para ello en la inicialización del <script> dentro del <head> cargas los arrays definidos pertenecientes a cada sexo por ejemplo, así:
var arrayhombres=["Alberto","Jose","Juan"];
var arraymujeres=["Ana","Maria","Isabel"];
Así tantos nombres como quieras poner, separados con la "," y los nombre entre comillas, dependiendo el radio seleccionado cojera una lista u otra, lo que deseas es hacer parecido a la búsqueda de Google, ¿qué se va rellenando una lista?
Si es así necesitas invocar la función JavaScript de búsqueda al detectar un cambio en el textbox con el evento onChange.
Dentro de la función de búsqueda, algo básico sería limitar el resultado de búsqueda para que muestre un máximo de nombres y otra cosa sería limitar a cuando quieres que se lance la función de búsqueda dependiendo de las letras escritas en el textbox, ya que sería recomendable poner que se ejecutara la función cuando tuviera una longitud de 2 o 3 letras, ya que puede que la lista a devolver fuera muy extensa.
Por ejemplo, controlas cuando se va a ejecutar la función con:
if (document.getElementById('texto').value.length>1){
codigo de la funcion
}
dentro de la función para recorrer el array en busca de texto igual al textbox:
for (i=0;i<arrayhombres.length;i++){
if(arrayhombres.indexOf(document.getElementById('texto').value!=-1){
encuentra el texto en esa posición del array.... y hará tal cosa....
}else{
No encuentra el texto en esa posición del array y hará tal otra cosa...
}
}
Para ello en la inicialización del <script> dentro del <head> cargas los arrays definidos pertenecientes a cada sexo por ejemplo, así:
var arrayhombres=["Alberto","Jose","Juan"];
var arraymujeres=["Ana","Maria","Isabel"];
Así tantos nombres como quieras poner, separados con la "," y los nombre entre comillas, dependiendo el radio seleccionado cojera una lista u otra, lo que deseas es hacer parecido a la búsqueda de Google, ¿qué se va rellenando una lista?
Si es así necesitas invocar la función JavaScript de búsqueda al detectar un cambio en el textbox con el evento onChange.
Dentro de la función de búsqueda, algo básico sería limitar el resultado de búsqueda para que muestre un máximo de nombres y otra cosa sería limitar a cuando quieres que se lance la función de búsqueda dependiendo de las letras escritas en el textbox, ya que sería recomendable poner que se ejecutara la función cuando tuviera una longitud de 2 o 3 letras, ya que puede que la lista a devolver fuera muy extensa.
Por ejemplo, controlas cuando se va a ejecutar la función con:
if (document.getElementById('texto').value.length>1){
codigo de la funcion
}
dentro de la función para recorrer el array en busca de texto igual al textbox:
for (i=0;i<arrayhombres.length;i++){
if(arrayhombres.indexOf(document.getElementById('texto').value!=-1){
encuentra el texto en esa posición del array.... y hará tal cosa....
}else{
No encuentra el texto en esa posición del array y hará tal otra cosa...
}
}
El código para hacer la búsqueda ya lo tengo hecho con JQuery, lo que necesito saber es como hacer para que en el caso de que se seleccione un radio u otro, ejecute una acción o la otra.
Ej:
Si se selecciona radio hombre:
alert("se selecciono hombre")
si se selecciona radio mujer
alert("se selecciono hombre")
Pero no se como hacerlo con el javascript
Perdona que te haga tantas preguntas :(
Muchísimas gracias por tu tiempo y dedicación!
Ej:
Si se selecciona radio hombre:
alert("se selecciono hombre")
si se selecciona radio mujer
alert("se selecciono hombre")
Pero no se como hacerlo con el javascript
Perdona que te haga tantas preguntas :(
Muchísimas gracias por tu tiempo y dedicación!
No te preocupes aquí se tiene que ayudar todo el mundo, je je.
Creía que pedías el desarrollo completo.
Mira, en tu caso, si deseas que realice la búsqueda al pulsar el botón ratio el evento onChange tiene que ir en el radio, pero lo más obvio sería ponerlo en el input text...
Al código que tienes:
<form action="send.php" method="post" name="formulario" id="formulario" onSubmit="javascript:return validate('form_id','email');">
<div class="pack"><div class="items">Sexo:</div><div class="inputs">
<input type="radio" id="sexo" for="sexo" name="sexo" value="Hombre" onChange="cambia();">Hombre
<input type="radio" id="sexo" for="sexo" name="sexo" value="Mujer" onChange="cambia();">Mujer</div></div>
El for="sexo" no creo que te sirva para nada, y tienes que cambiarle los id de los radio por ejemplo el del hombre el id lo cambias por "hombre" y el id del de mujer por "mujer" dejándolo así.
<form action="send.php" method="post" name="formulario" id="formulario" onSubmit="javascript:return validate('form_id','email');">
<div class="pack"><div class="items">Sexo:</div><div class="inputs">
<input type="radio" id="hombre" name="sexo" value="Hombre" onChange="cambia();">Hombre
<input type="radio" id="mujer" name="sexo" value="Mujer" onChange="cambia();">Mujer</div></div>
En este caso cuando le de a cualquiera de los dos ejecutara la función cambia, que esta función con esto:
function (cambia){
if(document.getElementById('hombre').checked){
alert("hombre")
}
if(document.getElementById('mujer').checked){
alert("mujer")
}
}
En este caso si funcionará porque el id del radio si es hombre y el id de mujer si es mujer no como antes que lo tenias puesto en ambos como sexo.
Espero que ya si te sirva, por lo menos el alert si te va a funcionar ^^
Creía que pedías el desarrollo completo.
Mira, en tu caso, si deseas que realice la búsqueda al pulsar el botón ratio el evento onChange tiene que ir en el radio, pero lo más obvio sería ponerlo en el input text...
Al código que tienes:
<form action="send.php" method="post" name="formulario" id="formulario" onSubmit="javascript:return validate('form_id','email');">
<div class="pack"><div class="items">Sexo:</div><div class="inputs">
<input type="radio" id="sexo" for="sexo" name="sexo" value="Hombre" onChange="cambia();">Hombre
<input type="radio" id="sexo" for="sexo" name="sexo" value="Mujer" onChange="cambia();">Mujer</div></div>
El for="sexo" no creo que te sirva para nada, y tienes que cambiarle los id de los radio por ejemplo el del hombre el id lo cambias por "hombre" y el id del de mujer por "mujer" dejándolo así.
<form action="send.php" method="post" name="formulario" id="formulario" onSubmit="javascript:return validate('form_id','email');">
<div class="pack"><div class="items">Sexo:</div><div class="inputs">
<input type="radio" id="hombre" name="sexo" value="Hombre" onChange="cambia();">Hombre
<input type="radio" id="mujer" name="sexo" value="Mujer" onChange="cambia();">Mujer</div></div>
En este caso cuando le de a cualquiera de los dos ejecutara la función cambia, que esta función con esto:
function (cambia){
if(document.getElementById('hombre').checked){
alert("hombre")
}
if(document.getElementById('mujer').checked){
alert("mujer")
}
}
En este caso si funcionará porque el id del radio si es hombre y el id de mujer si es mujer no como antes que lo tenias puesto en ambos como sexo.
Espero que ya si te sirva, por lo menos el alert si te va a funcionar ^^
Lo siento muchísimo, pero he escrito lo mismo que has puesto y sigue sin salirme, no me explico el por qué!
La web es: www.scazpr.zobyhost.com, puedes observar que está todo tal cual lo has escrito tú, y aún así sigue sin darme el alert! :S
¿Podrías echarle un vistazo?
Gracias :(
La web es: www.scazpr.zobyhost.com, puedes observar que está todo tal cual lo has escrito tú, y aún así sigue sin darme el alert! :S
¿Podrías echarle un vistazo?
Gracias :(
Lo he arreglado! Mil gracias!
El problema lo solucioné cambiando:
function (cambia){
if(document.getElementById('hombre').checked){
alert("hombre")
}
if(document.getElementById('mujer').checked){
alert("mujer")
}
}
por:
function cambia(){
if(document.getElementById('hombre').checked){
alert("hombre")
}
if(document.getElementById('mujer').checked){
alert("mujer")
}
}
Así funciona a la perfección, mil gracias de nuevo!
El problema lo solucioné cambiando:
function (cambia){
if(document.getElementById('hombre').checked){
alert("hombre")
}
if(document.getElementById('mujer').checked){
alert("mujer")
}
}
por:
function cambia(){
if(document.getElementById('hombre').checked){
alert("hombre")
}
if(document.getElementById('mujer').checked){
alert("mujer")
}
}
Así funciona a la perfección, mil gracias de nuevo!
Si, es verdad no hace falta que le mandaras ningún parámetro a la función, pero si has tenido que cambiar el ID de los radio.
Me alegro que te haya salido.
Me alegro que te haya salido.
