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.

Answer 1

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:

• Javascript Variable Scope on SO
• var on MDN