问题
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;
}
});
回答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();
回答2:
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;
}
});
回答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 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;
});
});
回答4:
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;
}
来源:https://stackoverflow.com/questions/30803497/onsubmit-function-is-not-defined