Elementary Javascript - Variable Scope Confusion

Question

I have a web page that includes two html forms, each with a submit button. I want to make sure that a user clicks the submit button on the first form before moving on to the second.

I have this javascript in the head:

<script type="text/javascript">
<!--Script to block date changes when price changes pending
var priceflag = 0;  
function pricechange() {
var priceflag = 1;  
}
function pricesubmit() {
var priceflag = 0;  
}
function datechange() {
    if (priceflag == 1){
alert ("Please click \"Submit\" before you move on to the dates.");
    }
}
-->
</script>

Then the forms in a very abbreviated form are:

<form action="<?php $_SERVER['PHP_SELF']?>" method="post" name="seasonprice">
<input name="price" value="<?php echo $price ?>" type="text" size="7" maxlength="7" onChange="pricechange()">
<input name="price2" value="" type="text" size="7" maxlength="7">
<input name="submit" type="submit" value="Submit" onClick="pricesubmit()">
</form>
<br>
<br>
<form id="addseason" action="<?php $_SERVER['PHP_SELF']?>" method="post" name="addseason">
<input name="FromDate" type="date" value="2013-01-01" size="16" onMouseDown="datechange();">
</form>

If a user changes "price" and then puts the cursor on "FromDate" without clicking "Submit", they should get the alert displayed. But it doesn't work! I'm tearing my hair out, yet I'm sure it's a very basic error.

Please use booleans for booleans. I'd also consider naming it something relevant to its function. — Dave Newton, Jan 21 '13 at 16:24
I'd suggest changing the title of this question to something related to the question, as "Elementary javascript" provides no information other than that it's related to javascript, which the javascript tag already gives. — jbabey, Jan 21 '13 at 16:24
Check out the section labelled "Functions and variable scope" on [jqFundamentals](http://jqfundamentals.com/chapter/javascript-basics). — jbabey, Jan 21 '13 at 16:35
Fair points. I did start with booleans, and only changed to integers while I was trying to get it working. — TrapezeArtist, Jan 21 '13 at 17:56

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

When you use var, you are declaring a local variable. So in your code, you are having 3 different variables: the global priceflag, the priceflag in pricechange and the priceflag in pricesubmit.

Also, as suggested in the comments, use a Boolean (true/false) where you need a Boolean.

Something like this would work (notice the missing vars inside the functions):

var priceflag = false;  
function pricechange() {
    priceflag = true;  
}
function pricesubmit() {
    priceflag = false;  
}
function datechange() {
     if (priceflag){
         ...
     }
}

Useful reads:

edited May 23 '17 at 12:27

Community

1
1

answered Jan 21 '13 at 16:23

kapa

77,694
21
158
175

Thanks, @bažmegakapa. I'm nearly there now. Your point about global and local variables seems so obvious once you point it out. I originally started with booleans but substituted numbers while I was trying to track down the problem. – TrapezeArtist Jan 21 '13 at 17:20
It's nearly working now, but I have a bit of an issue with the functions tripping over each other. If the user changes "price" and then uses the mouse to put the cursor on "FromDate", it seems like both functions are trying to trigger at the same time, resulting in the second one (which displays the desired alert) doesn't work. I think I need to play with the various onXxxx bits, though I'm not sure how I am going to work it out. – TrapezeArtist Jan 21 '13 at 17:32
1

Finally got it working, with a mixture of onChange, onClick, onMousedown and onMouseover. Slightly messy but it works! – TrapezeArtist Jan 23 '13 at 16:19

Elementary Javascript - Variable Scope Confusion

1 Answers1