onsubmit function is not defined

Question

Why is it saying that I have not defined my function? Is it because I have placed my function inside a document ready function? - Maybe I have to mention that I want to use this function to prevent submitting if my statement is not true.

my form tag in html:

<form class="text-left" method="post" action="" onsubmit="return myFunction();">

below is script(this script is in my head section) :

$( document ).ready(function() {

    //the number generators and sum of the two numbers
    var numberOne = Math.floor((Math.random() * 10) + 1); 
    var numberTwo = Math.floor((Math.random() * 10) + 1);
    var sum = numberOne + numberTwo;

    //write the math question to the div
    document.getElementById("captchaOutput").innerHTML = numberOne+ " og " +numberTwo;
    //alert(sum);

    function myFunction(){
        var humanInput = $('#captchaInput').val();

        if(humanInput == sum){

            $("#captcha_service_err").css("display", "inline")
            $("#captchaInput").css("border-color", "red");
             return false;
        }
             $("#captcha_service_err").css("display", "none")
        $("#captchaInput").css("border-color", "");
        return true;       
    }  
});

Answer 1

it because i have placed my function inside a document ready function?

Yes. Function declarations are (like var statements) scoped to the function they are declared within.

---

If you want to use myFunction as a global then move it, and the variables it depends on, out of the anonymous function you declare it with in.

---

Alternatively, you could explicitly create a global that references it:

window.myFunction = myFunction

---

The best solution, however, is to not use a global in the first place.

Remove the onsubmit attribute and bind your event handlers with JavaScript instead.

$('form').on('submit', myFunction);

Make sure you capture the event object:

function myFunction(e){

Then prevent the default form submission behaviour if you don't want it to submit:

$("#captchaInput").css("border-color", "red");
e.preventDefault();