CODEWITHSUNDEEP
javascripthtml
Lars Salembier
Lars Salembier

Reputation: 43

How can I stop my page from refreshing when I submit a form without lagging my page like crazy?

I am new to web development and I am trying to make a simple formula trainer where you need to type an exact answer and if it is correct letter by letter you get another question, otherwise you retry. Now the issue is that when you type the answer into the form on my main page that the code is linked to, when you submit, the page refreshes. How can I fix this? I would like if the page wouldn't refresh every time, because then it is impossible to see the other questions or check if you were right or wrong. Alternatively, I read something about databases being the solution here, but I know nothing about that so a simpler solution would be great.

    function answerCheck(question, correctAnswer) {
        $(".question").replaceWith("<p class='question'>" + question + "</p>")
        $(".form1").submit(function() {
            answer = document.forms["answerInsertion"]["answer"].value;
            if(answer == correctAnswer) {
                $(".rightWrong").replaceWith("<p class='juistFout'><br> Correct! The right answer was: " + correctAnswer + "</p>")
                return
            } else
                $(".rightWrong").replaceWith("<p class='rightWrong'><br> Wrong! Try again and check your answer for mistakes: " + answer + "</p>")
                answerCheck(question, correctAnswer)
        })
    }
    
    answerCheck("Give the definition of a real function", "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image.")
    
    answerCheck("Give the pair notation of the function f : y = 3x + 6", "f = \{(x,y) ∈ ℝ^2 | y = 3x + 6\}")

Upvotes: 1

Views: 49

Answers (2)

Tabaene Haque
Tabaene Haque

Reputation: 574

You can Use event.preventDefault() in the onSubmit event to prevent form submission, something similar to this -

    function answerCheck(question, correctAnswer) {
        $(".question").replaceWith("<p class='question'>" + question + "</p>")
        $(".form1").submit(function(event) {

            // Prevent form submission on page refreshes.
            event.preventDefault();
    
            answer = document.forms["answerInsertion"]["answer"].value;
            if(answer == correctAnswer) {
                $(".rightWrong").replaceWith("<p class='juistFout'><br> Correct! The right answer was: " + correctAnswer + "</p>")
                return
            } else
                $(".rightWrong").replaceWith("<p class='rightWrong'><br> Wrong! Try again and check your answer for mistakes: " + answer + "</p>")
                answerCheck(question, correctAnswer)
        })
    }
    
    answerCheck("Give the definition of a real function", "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image.")
    
    answerCheck("Give the pair notation of the function f : y = 3x + 6", "f = \{(x,y) ∈ ℝ^2 | y = 3x + 6\}")

Upvotes: 0

Derlin
Derlin

Reputation: 9891

The problem is in the default behavior of the submit form event. Ensure you are always returning false from your submit handler, and also ensure that you prevent the default event behavior.

One possibility:

<form onsubmit="event.preventDefault(); some_callback_calling_answerCheck();">

Also, do not call yourself answerCheck recursively (inside the else), it will just go into an infinite loop. And do not register a new submit handler on each call.

What you want is to fire answerCheck only when either 1) the users presses submit (button, enter key, ...) or 2) something changed in the input field. Inside it, just check the answer and update the question.

Update: here is a way to do it (basic structure and not tested, you'll have to understand it and make it better).

// wait for document ready event (jQuery)
$(function(){   
    // questions and answers, in order
    const qanda = [
        {"q": "Give the definition of a real function",  "a": "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image."},
        {"q": "...", "a": "..."}
    ];
    let currentIndex = 0; // current question displayed, index in the list

    // html elements: get them once and store them in variables 
    // for performance reasons
    const $question = $('p.question'); // where you display your question
    const $input = $('form input'); // your input for the answer
    const $rightwrong = $('.rightWrong'); // feedback

    // register on submit event
    $('.form1').submit(function(e){
        e.preventDefault(); // do not reload the page !
        let answer = $input.val(); // get the user's answer
        if(answer == qanda[currentIndex].a){
            // wright answer, move on:
            $rightWrong.text("good job");
            currentIndex += 1; // here, you would need to ensure you are not past the last question
            $question.text(qanda[currentIndex].q); // display next
        }else{
            // wrong answer
            $rightWrong.text("Wrong! Try again and check your answer for mistakes " + answer);
        }
        return false; // do not reload the page !
    });

   // finally, setup the first question
   $question.text(qanda[currentIndex].q);
});

In your HTML, you should have at least:

  • a form form1 with one input for the answer, and a submit button (to fire on submit event)
  • the <p class="question"></p>for displaying the question
  • a <p class="rightWrong"></p> for the feedbacks

Upvotes: 3

Related Questions