Foros del Web » Programando para Internet » Jquery »

Formulario jQuery, obtener resultado segun las opciones escogidas

Estas en el tema de Formulario jQuery, obtener resultado segun las opciones escogidas en el foro de Jquery en Foros del Web. Buenos días, Tengo un formulario, donde se realizar un test y estoy intentando hacer (en jQuery para no refrescar la página) que según las opciones ...
  #1 (permalink)  
Antiguo 16/09/2014, 04:27
 
Fecha de Ingreso: mayo-2012
Mensajes: 19
Antigüedad: 12 años, 6 meses
Puntos: 0
Formulario jQuery, obtener resultado segun las opciones escogidas

Buenos días,

Tengo un formulario, donde se realizar un test y estoy intentando hacer (en jQuery para no refrescar la página) que según las opciones escogidas me aparezca un resultado u otro y se muestre un mensaje segun las opciones correctas, por ejemplo de 1 a 2 acertadas un mensaje, 3 aciertos otro mensaje y de 4 a 5 otro mensaje, y que este se muestre en un div creado llamado id="resultado".

La verdad es que no se por donde empezar, os dejo el codigo del formulario por si alguien me puede ayudar, le estaría muy agradecido :)

Código HTML:
 <form class="ac-custom ac-radio ac-fill" autocomplete="off">
 <h5>Pregunta 1</h5>
 <ul>
 	<li><input id="r1" name="r1" type="radio" value="1"><label for="r1">Opción 1</label></li>
 	<li><input id="r2" name="r1" type="radio" value="0"><label for="r2">Opción 2</label></li>
 	<li><input id="r3" name="r1" type="radio" value="0"><label for="r3">Opción 3</label></li>
 	<li><input id="r4" name="r1" type="radio" value="0"><label for="r4">Opción 4</label></li>
 	<li><input id="r5" name="r1" type="radio" value="0"><label for="r5">Opción 5</label></li>
 </ul>
 <hr />
 <h5>Pregunta 2</h5>
 <ul>
 	<li><input id="r6" name="r2" type="radio" value="1"><label for="r6">Opción 1</label></li>
 	<li><input id="r7" name="r2" type="radio" value="0"><label for="r7">Opción 2</label></li>
 	<li><input id="r8" name="r2" type="radio" value="0"><label for="r8">Opción 3</label></li>
 	<li><input id="r9" name="r2" type="radio" value="0"><label for="r9">Opción 4</label></li>
 	<li><input id="r10" name="r2" type="radio" value="0"><label for="r10">Opción 5</label></li>
 </ul>
 <hr />
 <h5>Pregunta 3</h5>
 <ul>
 	<li><input id="r11" name="r3" type="radio" value="1"><label for="r11">Opción 1</label></li>
 	<li><input id="r12" name="r3" type="radio" value="0"><label for="r12">Opción 2</label></li>
 	<li><input id="r13" name="r3" type="radio" value="0"><label for="r13">Opción 3</label></li>
 	<li><input id="r14" name="r3" type="radio" value="0"><label for="r14">Opción 4</label></li>
 	<li><input id="r15" name="r3" type="radio" value="0"><label for="r15">Opción 5</label></li>
 </ul>
 <hr />
 <h5>Pregunta 4</h5>
 <ul>
 	<li><input id="r16" name="r4" type="radio" value="1"><label for="r16">Opción 1</label></li>
 	<li><input id="r17" name="r4" type="radio" value="0"><label for="r17">Opción 2</label></li>
 	<li><input id="r18" name="r4" type="radio" value="0"><label for="r18">Opción 3</label></li>
 	<li><input id="r19" name="r4" type="radio" value="0"><label for="r19">Opción 4</label></li>
 	<li><input id="r20" name="r4" type="radio" value="0"><label for="r20">Opción 5</label></li>
 </ul>
 <hr />
 <h5>Pregunta 5</h5>
 <ul>
 	<li><input id="r21" name="r5" type="radio" value="1"><label for="r21">Opción 1</label></li>
 	<li><input id="r22" name="r5" type="radio" value="0"><label for="r22">Opción 2</label></li>
 	<li><input id="r23" name="r5" type="radio" value="0"><label for="r23">Opción 3</label></li>
 	<li><input id="r24" name="r5" type="radio" value="0"><label for="r24">Opción 4</label></li>
 	<li><input id="r25" name="r5" type="radio" value="0"><label for="r25">Opción 5</label></li>
 </ul>
 <br />
 <button type="submit" class="cyan-btn med-btn pull-right">Enviar</button>
 </form> 
  #2 (permalink)  
Antiguo 16/09/2014, 07:34
(Desactivado)
 
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 11 años, 6 meses
Puntos: 17
Respuesta: Formulario jQuery, obtener resultado segun las opciones escogidas

$.post( "ajax/test.html", function( data ) {
$( "#resultado" ).html( data );
});
  #3 (permalink)  
Antiguo 16/09/2014, 08:15
 
Fecha de Ingreso: mayo-2012
Mensajes: 19
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Formulario jQuery, obtener resultado segun las opciones escogidas

Disculpa diurno10, pero no acabo de entender como mostrar el resultado sin recoger los datos del formulario.

Yo he intentado hacer alguna cosa, muestro lo que he hecho. El problema que me estoy encontrando es que la página se me refresca :(

Código HTML:
<script>

$(document).ready(function () {

    $("#submit").click(function () {
      	var parte1 = $("[name=r1]:checked").val();
		var parte2 = $("[name=r2]:checked").val();
		var parte3 = $("[name=r3]:checked").val();
		var parte4 = $("[name=r4]:checked").val();
		var parte5 = $("[name=r5]:checked").val();
		
		if (parte1 == 1 ) {
		
			$('#mostrar').html("<h1>Texto</h1>");
		} else if ( parte1 == 1 && parte2 == 1 && parte3 == 1 && parte4 == 1 && parte5 == 1) {
		
			$('.mostar').html("<h1>Texto</h1>");
			alert('Todo');
		} else if ( parte1 == 0 && parte2 == 0 && parte3 == 0 && parte4 == 0 && parte5 == 0) {
		
			alert('Todo 0');
		} else if ( parte1 == 1 && parte2 == 0 && parte3 == 0 && parte4 == 0 && parte5 == 0) {
		
			alert('parte 1');
		} else if( parte1 == 1 && parte2 == 1 && parte3 == 0 && parte4 == 0 && parte5 == 0) {
		
			alert('Parte 1 i parte 2');
		} else if ( parte1 == 1 && parte2 == 1 && parte3 == 1 && parte4 == 0 && parte5 == 0) {
		
			alert('Parte 1, parte 2 i parte 3');
		} else if ( parte1 == 1 && parte2 == 1 && parte3 == 1 && parte4 == 1 && parte5 == 0) {
		
			alert('Parte 1, parte 2, parte 3 i parte 4');
		}
    })  
});
</script> 
  #4 (permalink)  
Antiguo 17/09/2014, 12:59
(Desactivado)
 
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 11 años, 6 meses
Puntos: 17
Respuesta: Formulario jQuery, obtener resultado segun las opciones escogidas

al final del codigo q me mandaste pone return false;
o en ves de laburarlo con el boton submit utiliza un button comun, para que no envie el form

Etiquetas: formulario, opciones, resultado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:37.