I have a variable named as myVar. Its value changes when you click on the checkbox. When the checkbox is clicked you'll get an alert box showing its value as 1. When you deselect it, it will again show a alert box with value 0. This is correct.
Now I have 2 questions.
When I try to submit the document by clicking on
Submitthen I get an error asUncaught ReferenceError: confirm_submit is not defined. Why?When I put the
confirm_submitfunction out of theready eventI don't get the error but then in that case the second alert box which is inside confirm_submit function showsundefinedformyVar. Why? Is themyVarnot accessible withinconfirm_submitfunction?
Code:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.treeTable.js"></script>
<script type="text/javascript">
var myVar;
jQuery(document).ready(function() {
$("#myTable2").treeTable({
expandable: true,
clickableNodeNames: true,
initialState: "expanded",
});
document.getElementById('myVar').addEventListener('click', myVar, false);
function myVar() {
if (document.getElementById('myVar').checked === true) {
myVar = 1;
} else {
myVar = 0;
}
alert(myVar);
}.................
some functions....................
function confirm_submit() {
alert(myVar);
if (confirm('Press OK to confirm')) {
document.myform.myVar.value = myVar;
document.myform.submit();
reload_parent_and_close_window();
}
}
and some more functions.....................
});
</script>
</head>
<body>
<form name="myform" id="myform" action="$action" method="post" onsubmit="return false;">
<input type="checkbox" name="myVar" id="myVar" value="myVar">Text here
</form>
<a href="javascript:confirm_submit()">Submit</a>
</body>
</html>
I have a variable named as myVar. Its value changes when you click on the checkbox. When the checkbox is clicked you'll get an alert box showing its value as 1. When you deselect it, it will again show a alert box with value 0. This is correct.
Now I have 2 questions.
When I try to submit the document by clicking on
Submitthen I get an error asUncaught ReferenceError: confirm_submit is not defined. Why?When I put the
confirm_submitfunction out of theready eventI don't get the error but then in that case the second alert box which is inside confirm_submit function showsundefinedformyVar. Why? Is themyVarnot accessible withinconfirm_submitfunction?
Code:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.treeTable.js"></script>
<script type="text/javascript">
var myVar;
jQuery(document).ready(function() {
$("#myTable2").treeTable({
expandable: true,
clickableNodeNames: true,
initialState: "expanded",
});
document.getElementById('myVar').addEventListener('click', myVar, false);
function myVar() {
if (document.getElementById('myVar').checked === true) {
myVar = 1;
} else {
myVar = 0;
}
alert(myVar);
}.................
some functions....................
function confirm_submit() {
alert(myVar);
if (confirm('Press OK to confirm')) {
document.myform.myVar.value = myVar;
document.myform.submit();
reload_parent_and_close_window();
}
}
and some more functions.....................
});
</script>
</head>
<body>
<form name="myform" id="myform" action="$action" method="post" onsubmit="return false;">
<input type="checkbox" name="myVar" id="myVar" value="myVar">Text here
</form>
<a href="javascript:confirm_submit()">Submit</a>
</body>
</html>
-
1
maybe you should avoid to choose function names identical to existing global function, like
confirm(): the submit should call your function orwindow.confirm? – Fabrizio Calderan Commented Jul 3, 2013 at 10:40 - It's different in my code, I renamed it here because of the privacy reasons. – Chankey Pathak Commented Jul 3, 2013 at 10:51
3 Answers
Reset to default 3You seem to be failing to grasp a few fundamental concepts here, some JavaScript some programming basics.
function myVar() {
...
alert(myVar);
}
What did you expect to happen here? myVar the function and myVar the variable in this scope are the same thing. If you declare a variable and then declare a function with the same name, the function will replace the variable in the stack. Also, there is no block scope in JavaScript. Everything declared in a function is declared first by the piler, regardless of block. So...
function a() {
var a = 1;
if (1) {
var b = 4;
alert(b);
}
alert(b);
}
Don't assume scoping is the same as Java or C++.
Also, if you want to make something explicitly global, then make it explicit. Try renaming the myVar function to something sensible like "onClick_myVar". Then immediately before where the function is declared, put the function inside a closure and declare your state variable:
(function() { // Closure
var myVar;
function onClick_myVar() {
if ($(this).getattr("checked")) {
myVar = 1;
} else {
myVar = 0;
}
alert(myVar);
}
$('#myVar').click(onClick_myVar);
})();
function myVar() {
if (document.getElementById('myVar').checked === true) {
myVar = 1;
} else {
myVar = 0;
}
alert(myVar);
}
That will only work once. As soon as you enter the function myVar you will replace it's value (function is an object in JS) with either 1 or 0, and it will no longer be a function object, but a number.
the problem is... you have same name for your var and the input element..
document.myform.myVar.value = myVar;
so either change your input element's id to someother variable or change all your myVar name
<input type="checkbox" name="myVar" id="inputId" value="myVar">Text here
document.myform.inputId.value = myVar;