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;       
    }  
});

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:

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();

Solution 2

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 numbers
var 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 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;
}

Update

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

$( 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);

    $('form').on('submit', function(){
        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;       
    });  
});

Solution 3

Try using window Object here:

$( 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);

    window.myFunction = function () {
        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;       
    }  
});

Comments

[nnnnnn]

This won't work, because myFunction() still tries to use sum.

[Martin Nielsen]

Thanks very help-ful and IT WORKED!

[AmmarCSE]

@MartinNielsen, glad it did. But I suggest you follow Quentins answer and bind with jquery .on('submit') instead

[AmmarCSE]

@MartinNielsen, if you dont know how, let me or Quentin know so we can provide more detail