onsubmit 函数未定义

Question

为什么说我没有定义我的功能？是因为我将我的函数放在了文档就绪函数中吗？ - 也许我不得不提一下，如果我的陈述不正确，我想使用这个功能来防止提交。

我在 html 中的表单标签：

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

下面是脚本（这个脚本在我的头部分）：

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

这是因为 myFunction 定义在 $(document).ready 的范围内，而在之外是不可见的。在外部定义它及其因变量

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

更新

删除表单的内联 onsbumit 并使用 on() 如下

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

Answer 2

尝试在此处使用 window 对象：

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

Answer 3

    var sum = 0;
    $( 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);
            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 4

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

是的。函数声明（如 var 语句）作用域为它们在其中声明的函数。

如果您想将 myFunction 用作全局变量，则将其及其依赖的变量移出您使用 in 声明的匿名函数。

或者，您可以显式创建一个引用它的全局变量：

window.myFunction = myFunction

然而，最好的解决方案是首先不要使用全局变量。

删除 onsubmit 属性并使用 JavaScript 绑定您的事件处理程序。

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

确保捕获事件对象：

function myFunction(e){

如果您不想提交，则阻止默认的表单提交行为：

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

onsubmit 函数未定义

onsubmit function is not defined

javascript

jquery

forms

onsubmit