Estoy creando un cuestionario de idiomas y requiere varios botones de envío en una página a través de los cuales uno puede verificar sus respuestas. Tener un botón de envío funciona bien. Pero hasta ahora, tener varios botones de envío crea problemas en los que un botón de envío, cuando se presiona, genera dos (si hay 2 preguntas) de las mismas respuestas en ambos botones de envío. Entonces, después de un clic, verá 4 de las mismas respuestas. Y solo se desactivará un botón de envío. Consulte los scripts a continuación para obtener más información.
A continuación encontrará el formulario html para 1 de las preguntas del cuestionario.
<form id="formId"> <h5>1. I am strong</h5> <p>Translate the above sentence.</p> <input type="text" id="q1" /><br><br> <input type="submit" class="btn btn-outline-primary" id="submitId" value="Check answer" /> </form>A continuación, encontrará el javascript que da la respuesta cuando se hace clic en el botón Enviar.
<script> var answers = { "q1": ["Ik ben sterk"] }; function markAnswers(){ $("input[type='text']").each(function(){ console.log($.inArray(this.value, answers[this.id])); if($.inArray(this.value, answers[this.id]) === -1){ $(this).parent().append("<br>The correct answer: Ik ben sterk"); } else { $(this).parent().append("<br><font style='color:green;'>Correct!</font>"); } }) } $("form").on("submit", function(e){ e.preventDefault(); markAnswers(); }); </script>La secuencia de comandos a continuación es para asegurarse de que el usuario no pueda enviar la respuesta nuevamente.
<script> var form = document.getElementById('formId'); var submitButton = document.getElementById('submitId'); form.addEventListener('submit', function() { // Disable the submit button submitButton.setAttribute('disabled', 'disabled'); // Change the "Submit" text submitButton.value = 'Check answer'; }, false); </script>Las secuencias de comandos anteriores son solo para una pregunta. Si agrego otra pregunta y copio y pego scripts y cambio las ID a q2, formId2 y submitId2, no funcionará como se describió anteriormente. ¿Qué debo cambiar en los scripts para que esto funcione? Cualquier sugerencia es bienvenida. Gracias.
Su función markAnswers está recorriendo todas las entradas, es por eso que obtiene las respuestas para todas ellas cuando hace clic en cualquiera de los botones.
Puede solucionar esto cambiando la identificación de los formularios para que sean como formId1 , formId2 , etc., y luego asignando esa identificación a la función markAnswers .
Ejemplo:
function markAnswers(id) { $(`#q${id}`).each(function () {\ if ($.inArray(this.value, answers[this.id]) === -1) { $(this).parent().append(`<br>The correct answer: ${answers[this.id]}`); } else { $(this).parent().append("<br><font style='color:green;'>Correct!</font>"); } }); } $("form").on("submit", function (e) { e.preventDefault(); const id = e.target.id.replace("formId", "") markAnswers(id); });Además, también puede deshabilitar el botón en el mismo evento de envío:
$("form").on("submit", function (e) { ... $(`#submitId${id}`).each(function () { this.setAttribute('disabled', true); this.value = "Check answers" }) });Aquí hay un ejemplo de trabajo: Codesandbox