Question

There are two numbers. User fills out answer & clicks enter or the “next” button (activate form)

I want the form to always “return false” as all next actions are loaded with javascript.
As long as the user keeps filling out the correct answer it works, but when you fill out the wrong answer, it first shows you the “hey you, what is this?” box, but twhen user tries to answer again, the entire page is realoaded :/

You can see it here:
http://skolresurser.se/matematik/simple/

HTML

<form id="theChallenge">
    <h1>
        <span class="first">2</span>
        <span style="position: relative; top: 0.24em; margin: 0 6px;">*</span>
        <span class="second">6</span>
        <span style="margin-left: 0.13em; font-size: 0.8em; position: relative; top: -0.13em; margin-right: -0.60em;">=</span>
    </h1>
    <div id="notReally" style="display: none;">
        <h2>Not reeaaaaally:</h2>
        <span id="actually"></span>
    </div>
    <input type="number" class="answerInput"><br>
    <button class="2btn btn-large btn-success checkAnswer" href="#">Next</button>
</form>

JS:

$(function() {
    function biggestNumber() {
        return Math.max.apply(this, arguments);
    }

    $("#theChallenge").submit(function() {
        first = $(".first").text();
        second = $(".second").text();
        correctAnswer = parseInt($(".first").text()) * parseInt($(".second").text()); //parseInt = omvandla text till siffra.. och slå ihop de två alternativen!  och detta är då vårt rätta svar        
        theAnswer = $(".answerInput").val() //Vad har användaren skrivit in för svar?
        alert('first' + first);

        //Check if answer is correct
        if (theAnswer == correctAnswer) {
            //Create new numbers
            var randomNum = 1 + Math.ceil(Math.random() * 12); /* Pick random number between 1 and 12 */
            $('.first').text(randomNum);
            var randomNum = 1 + Math.ceil(Math.random() * 12); /* Pick random number between 1 and 12 */
            $('.second').text(randomNum);
        } else {
            //Show the person doing the test that
            $("#notReally").slideDown('fast');
            $("h1").slideUp('medium');

            biggestNumber = biggestNumber(first, second); //en funktion som är inlagd längre upp!!
            if (biggestNumber == first) { //Om största numret = första numret, då är det, det andra numret vi vill stapla upp, annars är det ju första siffran vi vill stapla upp "största siffran antalet gånger".
                theOtherNumber = second;
            } else {
                theOtherNumber = first;
            }
            staplaUpp = theOtherNumber; //Börja med att lägga in den mindre siffran en gång först, och sedan för varje till  " +siffran "
            for (var i = 0; i < biggestNumber - 1; i++) { //För varje antal det finns av den mindre siffran, stapla upp den med plus emellan!
                staplaUpp = staplaUpp + '<span style="margin:0 0.2em;">+</span>' + theOtherNumber;
            }
            $("#actually").append(staplaUpp);

        }

        $(".answerInput").val('');
        alert('first' + first);
        return false;
    });
});

Answer 1

Usually the form failing on the second submit is an indication that there was an error in your javascript event handler that prevented it from returning false. To debug these, it is useful to use the javascript console in your browser with the option to preserve the log information when navigating between pages. ( this option is called Preserve Log upon Navigation in the webkit debugger ). Using this technique, I found:

Uncaught TypeError: number is not a function skolresurser.se:137
(anonymous function)

Looking at that section of code I can see the problem is here:

biggestNumber = biggestNumber(first,second); //en funktion som är inlagd längre upp!!

When you assign biggestNumber to the return value of itself, you overwrite the function biggestNumber with the number biggestNumber. Then, the second time you click the submit button, your code fails.

Instead, you should be assigning that return value to a different variable:

     var bigNum = biggestNumber(first,second); //en funktion som är inlagd längre upp!!
       if(bigNum==first){ //Om största numret = första numret, då är det, det andra numret vi vill stapla upp, annars är det ju första siffran vi vill stapla upp "största siffran antalet gånger".
        theOtherNumber=second; 
       }else{
        theOtherNumber=first; 
       }
      staplaUpp = theOtherNumber;  //Börja med att lägga in den mindre siffran en gång först, och sedan för varje till  " +siffran "

       for(var i = 0; i < bigNum-1; i++) { //För varje antal det finns av den mindre siffran, stapla upp den med plus emellan!
            staplaUpp = staplaUpp + '<span style="margin:0 0.2em;">+</span>'+theOtherNumber;
        }
       $("#actually").append(staplaUpp); 

Then your biggestNumber function is still a function the next time it’s called.