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
– Dave Newton, Commented Jan 21, 2013 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
– jbabey, Commented Jan 21, 2013 at 16:24
Check out the section labelled "Functions and variable scope" on jqFundamentals. — jbabey
– jbabey, Commented Jan 21, 2013 at 16:35
Fair points. I did start with booleans, and only changed to integers while I was trying to get it working. — TrapezeArtist
– TrapezeArtist, Commented Jan 21, 2013 at 17:56

Community · Accepted Answer · 2017-05-23 12:27:05Z

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, 2017 at 12:27

CommunityBot

11 silver badge

answered Jan 21, 2013 at 16:23

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TrapezeArtist Over a year ago

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 Over a year ago

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 Over a year ago

Finally got it working, with a mixture of onChange, onClick, onMousedown and onMouseover. Slightly messy but it works!

Collectives™ on Stack Overflow

Elementary Javascript - Variable Scope Confusion

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related