Onsubmit Function Is Not Defined

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 fu

Solution 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:

functionmyFunction(e){

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

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

Solution 2:

Try using window Object here:

$( document ).ready(function() {
    //the number generators and sum of the two numbersvar 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 divdocument.getElementById("captchaOutput").innerHTML = numberOne+ " og " +numberTwo;
    //alert(sum);window.myFunction = function () {
        var humanInput = $('#captchaInput').val();

        if(humanInput == sum){

            $("#captcha_service_err").css("display", "inline")
            $("#captchaInput").css("border-color", "red");
             returnfalse;
        }
             $("#captcha_service_err").css("display", "none")
        $("#captchaInput").css("border-color", "");
        returntrue;       
    }  
});

Solution 3:

This is because myFunction is defined within the scope of the $(document).ready and is not visible outside. Define it outside along with its dependant variables

//the number generators and sum of the two numbersvar numberOne = Math.floor((Math.random() * 10) + 1);
var numberTwo = Math.floor((Math.random() * 10) + 1);
var sum = numberOne + numberTwo;
$(document).ready(function() {
    //write the math question to the divdocument.getElementById("captchaOutput").innerHTML = numberOne + " og " + numberTwo;
    //alert(sum);
});

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

    if (humanInput == sum) {

        $("#captcha_service_err").css("display", "inline")
        $("#captchaInput").css("border-color", "red");
        returnfalse;
    }
    $("#captcha_service_err").css("display", "none")
    $("#captchaInput").css("border-color", "");
    returntrue;
}

Update

Remove the inline onsbumit for the form and use on() like below

$( document ).ready(function() {

    //the number generators and sum of the two numbersvar 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 divdocument.getElementById("captchaOutput").innerHTML = numberOne+ " og " +numberTwo;
    //alert(sum);

    $('form').on('submit', function(){
        var humanInput = $('#captchaInput').val();

        if(humanInput == sum){

            $("#captcha_service_err").css("display", "inline")
            $("#captchaInput").css("border-color", "red");
             returnfalse;
        }
             $("#captcha_service_err").css("display", "none")
        $("#captchaInput").css("border-color", "");
        returntrue;       
    });  
});

Solution 4:

var sum = 0;
    $( document ).ready(function() {

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

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


        });

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

                if(humanInput == sum){

                    $("#captcha_service_err").css("display", "inline")
                    $("#captchaInput").css("border-color", "red");
                     returnfalse;
                }
                     $("#captcha_service_err").css("display", "none")
                $("#captchaInput").css("border-color", "");
                returntrue;       
            }