validating a php value with javascript onclick

Hi

I have a shopping basket that stores total items bought.
I want a simple javascript to use in a php page that says:
on click to checkout, if $total==0, display an alert that says: you can not checkout, basket is empty" or something similar.
I know a little bit about php but ever less about javascript.
Thanks for your time.

 

You need to somehow insert this PHP var into a JS var. One simple example is the fallowing:

<input type='hidden' id='total' value='<?=$total?>'>

Code (markup):

If you don't want to add the html tag, use the fallowing code:

<script type='text/javascript'>
var total = <?=$total?>;
</script>

Code (markup):

Now you can access the variable trough JS. The check should be something like this (for the first example):

function checkTotal()
{
  if(document.getElementById('total').value == 0)
     alert('you can not checkout, basket is empty... blah blah blah');
}

Code (markup):

And

function checkTotal()
{
  if(window.total == 0)
     alert('you can not checkout, basket is empty... blah blah blah');
}

Code (markup):

for the second example. Hope that helps

 

Hi
Many thanks for your reply.
I am sure I am doing something stupid.
Can you please check where I am going wrong, since the page does not take any notice of my alert at all!!

            <?php 
						$Gt=$totalCost+$vat+$delivery;
						
				//	echo number_format($Gt, 2, ".", ","); 	
						
						?>                              </td>
                              <td colspan="2" >
							
							  
							
							  
							 <a   onclick="checkTotal" href="../stockcheck/cart_wp_cc.php"><img src="../images/checkoutoff.gif" alt="finished ordering"   id="Image2" onMouseOver="MM_swapImage('Image2','','../images/checkouton.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>

HTML:

then I have:

<script type='text/javascript'>
var total = <?=$Gt?>;
</script>

<script type='text/javascript'>
function checkTotal()
{
  if(window.total == 0)
     alert('you can not checkout, basket is empty');
</script>
}
Thanks again

Code (markup):

 

Just a couple of minor syntax errors:

Add brackets to this function

onclick="checkTotal"

Code (markup):

making it

onclick="checkTotal()"

Code (markup):

The other one is misplacing a </script> tag and a closing bracket at the end of the code:

</script>
}

Code (markup):

just change this two lines:

}
</script>

Code (markup):

 

Hi
Thanks xlcho for your help.
But still its a no go.

   <?php 
						$Gt=$totalCost+$vat+$delivery;
						
				//	echo number_format($Gt, 2, ".", ","); 	
						
						?>                              </td>
                              <td colspan="2" >
							
							  
							
							  
							 <a   onclick="checkTotal()" href="../stockcheck/cart_wp_cc.php"><img src="../images/checkoutoff.gif" alt="finished ordering"   id="Image2" onMouseOver="MM_swapImage('Image2','','../images/checkouton.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>

<td > UK Customers</td><td class="border"><img src="../images/union-jack.gif" alt="UK customers" width="40" ></td>

Code (markup):

<script type='text/javascript'>
var total = <?php echo $Gt?>;

</script>

<script type='text/javascript'>
function checkTotal()
{
  if(window.total == 0)
     alert('you can not checkout, basket is empty');
	
}

</script>

Code (markup):

I have tried both versions.
can you think of what I might have done wrong?

 

total is a global var so you should change the if statement by

if (total == 0)

Not sure if it is the problem but you can try it.

 

Hi
Tried that still no good.
two questions:
1) I don't necessarily have to use the html <input> statement with onClick, do I?
2) Does it matter where I put the javascript statement?
Thanks

 

The code works just fine. The only error I get is that MM_swapImage is not defined, which is normal, cause it's somewhere outside the code you are giving. Even with this error the code works. I thought of something else you might want to do - stop the submition of the form if 'total' is zero. Here is the whole code, a little bit better aligned and structured:

<?php 
$Gt=$totalCost+$vat+$delivery;				
?>
<td colspan="2" >
	<a onclick="return checkTotal()" href="../stockcheck/cart_wp_cc.php">
		<img src="../images/checkoutoff.gif" alt="finished ordering" id="Image2" onMouseOver="MM_swapImage('Image2','','../images/checkouton.gif',1)" onMouseOut="MM_swapImgRestore()">
	</a>
</td>
<td >
	UK Customers
</td>
<td class="border">
	<img src="../images/union-jack.gif" alt="UK customers" width="40" >
</td>
<script type='text/javascript'>
var total = <?php echo $Gt?>;
</script>
<script type='text/javascript'>
function checkTotal()
{
  if(window.total == 0)
     alert('you can not checkout, basket is empty');
     
    return false;	
}
</script>

Code (markup):

Here is a small addition that stops the form from submitting when you click the link and the total is zero. Apart from that, the code is the very same. If you think it doesn't work, cause it doesn't alert the message - check if the $Gt is really equal to zero when you test it. If you still have problems, paste the outputted source from your browser, so i can tell you what you are doing wrong

 

Freud2002, window.total is a more secure way of knowing you are working with the global variable 'total'. If you use just total, insted of window.total, you could end up accessing a local variable with the same name. The window element stores all variables from the global scope of the script. I'm sure this is not the error, cause when I test it there is nothing wrong with the code

 

BINGO.
Many many thanks for taking the trouble of finding the solution for me.
Cheers mate.

 

The last code has produced another error.
Although it produces the alert when basket is empty, it stops proceeding to the next step when the basket is not empty.
I.e. when I click on the button, it does not go anywhere at all.
I too out

 return false;	

Code (markup):

but then after showing the alert it proceeds to go to the next stage.

 

Oops, my bad
The function should be changed to the fallowing:

function checkTotal()
{
  if(window.total == 0)
  {
     alert('you can not checkout, basket is empty');
     return false;	
  }
  
  return true;

}

Code (markup):

Return true when the total is not zero. The previous code was always returning false (thus not submitting the form) and just showed an alert if the value is zero...

 

Hi
You were right in that the previous function always returned a false result.
Your last code had two drawbacks:
a) When I started the page it showed me the alert error as the basket was empty.
b) When I clicked ok to alert box, it let me proceed to the next page with an empty basket.

I don't know why.
I tried this code and this seems to work, so I will stick to this.

function checkTotal()
{
  if(window.total !== 0)
  {
  return true;
  }
  else
  {
  
     alert('you can not checkout, basket is empty');
	 return false;
    } 
 
}

Code (markup):

you have given me lots of clues to the future coding and have learnt a lot.
Cheers mate.