2

Tengo que hacer un cuestionario en el que cada estudiante elige una sola respuesta. Para ello lo estoy manejando con un <input type="radio>, lo que necesito es que después de que el estudiante elija la respuesta, se suba inmediatamente a la base de datos y ya no pueda seleccionar más.

Aquí el código de lo que tengo.

<script type="text/javascript">
        $(document).ready(function(){
            $("input[id=Pedro]").click(function (){
                alert("Quien descubrió américa fue: Pedro Galibaldi");
            });

            $("input[id=Roberto]").click(function (){
                alert("Quien descubrió américa fue: Roberto Gomez");
            });

            $("input[id=Cristobal]").click(function (){
                alert("Quien descubrió américa fue: Cristobal Colon");
            });

            $("input[id=Isabel]").click(function (){
                alert("Quien descubrió américa fue: La reina isabel");
            });

            $("input[id=zidane]").click(function (){
                alert("Quien descubrió américa fue: zidane zidane");
            });
        });
</script>

Cada estudiante ingresa con su usuario y contraseña. Con ese usuario que lo identifica, él o ella, debe votar por el que desee e insertarse en la base de datos de la siguiente manera.

Juan votó por "la reina isabel Carlos votó por "Cristobal" Luisa votó por "Roberto"

Y así mismo quedar guardados en la base de datos.

2
  • Pero... ¿se trata de una sola pregunta o son varias? Si es una sola pregunta, la respuesta de @einer es válida, pero si es un formulario con varias preguntas de selección múltiple, es mejor desactivar el chekbox de cada pregunta una vez seleccionado y al final enviar el formulario completo... de ese modo evitas hacer llamadas constantes a la BD.
    – A. Cedano
    el 6 sep. 2017 a las 16:17
  • Es sólo una pregunta, es así tal cual como la mandé. Porque ya dependiendo de lo que respondan en esa pregunta se define para qué curso van... Pero si, en resumidas palabras, es una sola pregunta
    – ceortiz27
    el 6 sep. 2017 a las 16:18

2 respuestas 2

2

Propongo esta solución más simple.

Al hacer click en una opción se desactivan las otras y se envía la información.

$(function() {
  $(':radio').click(function() {
    $(':radio').prop("disabled", true);
    valor= $(this).val();
    /*Desde aquí invocas la función que agrega a la BD
      y le pasas el valor del radio seleccionado
      Ejemplo: agregarDatos(valor);*/
   // agregarDatos(valor);
      console.log("Aquí envías a la BD: "+valor);

  });

  function agregarDatos(valor){
    // console.log("Aquí envías a la BD: "+valor);
    /*Desde esta función puedes implementar una llamada a Ajax
     *que enviará la información del radio seleccionado a la BD
    */ 

        /* La petición Ajax sería algo así */

		var request = $.ajax({
			url: "agregar.php", //Archivo de servidor que inserta en la BD
			method: "POST",
			data: {radio: valor},
			dataType: "json"
		});
		
		request.done(function( data ) {
		  console.log("Se agregaron los datos: "+data);
		});
		
		request.fail(function( jqXHR, textStatus ) {
			alert( "Error petición Ajax: " + textStatus );
		});      


   }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Opción 1:<input type="radio" id="p1" name="n1" value="Opción 1"><br /> Opción 2:<input type="radio" id="p2" name="n2" value="Opción 2"><br /> Opción 3:<input type="radio" id="p2" name="n3" value="Opción 3"><br />

16
  • Donde dice "Aquí envías a la base de BD:" ¿Sólo es poner el nombre de la tabla en la base de datos?
    – ceortiz27
    el 6 sep. 2017 a las 16:30
  • Es un mensaje de ejemplo para que veas que se recupera bien el valor del radio button seleccionado. Observa el código jQuery, donde dice: console.log("Aquí envías a la BD: "+$(this).val()); tienes que hacer una llamada a la función que agrega la info a la base de datos, pasándole el valor $(this).val() que es el del rabio button seleccionado. Ejemplo, si tu función se llama agregarDatos, ahí harías una llamada como esta: agregarDatos($(this).val()); y en esta función tendrías el código que agrega a la BD. No sé si me explico.
    – A. Cedano
    el 6 sep. 2017 a las 16:34
  • Claro que si, el problema es que todavía no he hecho la inserción a la base de datos, entonces no sabría decirte.
    – ceortiz27
    el 6 sep. 2017 a las 16:37
  • Es que son dos preguntas en una. Para insertar en la BD tú tienes que enviar el valor del radio seleccionado al servidor mediante una petición Ajax y para ello tienes que implementar código escrito en lenguaje de servidor (PHP u otro). Es en ese código que se hace la inserción en la BD, no aquí. En Stackoverflow hay varias preguntas con buenas respuestas sobre cómo enviar datos al servidor mediante Ajax y jQuery.
    – A. Cedano
    el 6 sep. 2017 a las 16:39
  • 1
    @A.Cedano solo hay un detalle si se presiona la misma opción varias veces, se envía la misma respuesta varias veces Aquí envías a la BD: Opción 2 Aquí envías a la BD: Opción 2 Aquí envías a la BD: Opción 2 el 6 sep. 2017 a las 16:48
2

Utiliza el metodo submit() para enviar la informacion del formulario al servidor cauando se haga clic al radio:

$(document).ready(function(){
            $("input[id=Pedro]").click(function (){
                alert("Quien descubrió américa fue: Pedro Galibaldi");
                $("idFormulario").submit();
            });

            $("input[id=Roberto]").click(function (){
                alert("Quien descubrió américa fue: Roberto Gomez");
                $("idFormulario").submit();
            });

            $("input[id=Cristobal]").click(function (){
                alert("Quien descubrió américa fue: Cristobal Colon");
                $("idFormulario").submit();
            });

            $("input[id=Isabel]").click(function (){
                alert("Quien descubrió américa fue: La reina isabel");
                $("idFormulario").submit();
            });

            $("input[id=zidane]").click(function (){
                alert("Quien descubrió américa fue: zidane zidane");
                $("idFormulario").submit();
            });
        });
11
  • $(document).ready(function(){ es deprecated desde jQuery 3. Considera responder con código actualizado para evitar la propagación de código obsoleto. Ver: jQuery 3 declaró document.ready obsoleto ¿hay cambios también para window.load?
    – A. Cedano
    el 6 sep. 2017 a las 16:10
  • 2
    Todo dependeria de la version que el OP utilize no? Si no utiliza la v3, entiendo que seria innecesario especificarle ese dato.
    – Einer
    el 6 sep. 2017 a las 16:13
  • ¿Osea que quedará funcionando así? $(function() { // Handler for .ready() called. });
    – ceortiz27
    el 6 sep. 2017 a las 16:14
  • No, porque function funciona con casi todas las versiones de jQuery y es la forma recomendada, mientras que si usas document.ready cuando el OP tenga que pasar indefectiblemente a jQuery 4 ese código ya no funcionará, pues será sacado del core. Y si pasa ahora a jQuery 3 tendrá un warning de código obsoleto.
    – A. Cedano
    el 6 sep. 2017 a las 16:15
  • 1
    Toda migración de versión en cualquier lenguaje, libreria, framework, etc suele tener una planificación, por mas mínima que fuese, donde se revisa cualquier incompatibilidad, por lo que que ambas son validas. A menos que el usuario indique la necesidad para una versión especifica.
    – juliocpiro
    el 6 sep. 2017 a las 16:25

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.