asked on

JavaScript - add a second onClick event to a form button?

Hi,
how can I add a second onClick event to my form button?
I want checkFields() to run first and if returns true then redirect to process_payment.php page?

Thanks,

Andrew

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <script language="JavaScript" type="text/javascript" >
   //<!--
  var clickcount = 0;

   function checkFields(){
     if (clickcount == 0) {
       //count clicks 
       clickcount ++;
       return true;
     }
     else {
       alert("Transaction is in progress.");
       return false;
     }
   }
   //-->

   </script>

</head>

<body>

<form>
<input type="button" class="button green" onClick="location.href='process_payment.php?cartId=<?php echo $cookie;?>'" value="Process Order" >
</form>
</body>
</html>

Open in new window

Lee

Just modify checkFields to something like this:

function checkFields(){
if (clickcount == 0) {
//count clicks
clickcount ++;
location.href='process_payment.php?........;
}
else {
alert("Transaction is in progress.");
return false;
}
}

Then change your onclick to call checkFields

soupBoy

I would try not to have your click events written inline with your HTML...

Try something like this...
HTML:

<form>
    <input type="button" class="button green" value="Process Order" id="theButton" />
</form>

Open in new window

JavaScript:

//<!--
var clickcount = 0,
    theButton = document.getElementById("theButton");

theButton.onclick = function () {
    if (checkFields()) { //if true
        location.href = 'process_payment.php?cartId=<?php echo $cookie;?>';
    } else {
        alert('false!');
    }
}

function checkFields() {
    if (clickcount == 0) {
        //count clicks 
        clickcount++;
        return true;
    } else {
        alert("Transaction is in progress.");
        return false;
    }
}
//-->

Open in new window

Om Prakash

Instead of two onclick, you can attach handler whch can call many others as follows:
Example:

<a href="#blah" id="myLink"/>

<script type="text/javascript">
function myOtherFunction() {
//do stuff...
}
document.getElementById( 'myLink' ).onclick = function() {
//do stuff...
myOtherFunction();
};
More options:
http://stackoverflow.com/questions/2881307/can-i-have-two-javascript-onclick-events-in-one-element

COBOLdinosaur

put the link in the action of the form. Execute the function from a click event and when you want to go to the server just use document.forms[0].submit() and it will execute the action as a get.

Cd&

sabecs

ASKER

Thanks for your help. much appreciated..

The only code I could get to work is shown below, but I am not sure if I should use

onClick="checkFields();location.href='process_payment.php?cartId=<?php echo $cookie;?>'"

or

onClick="if(checkFields()){location.href='process_payment.php?cartId=<?php echo $cookie;?>'}"

which both appear to work?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <script language="JavaScript" type="text/javascript" >
   //<!--
  var clickcount = 0;

   function checkFields(){
     if (clickcount == 0) {
       //count clicks 
       clickcount ++;
       return true;
     }
     else {
       alert("Transaction already in progress.. Please wait...");
       return false;
     }
   }
   //-->

   </script>

</head>

<body>

<form>
<input type="button" class="button green" onClick="if(checkFields()){location.href='process_payment.php?cartId=<?php echo $cookie;?>'}" value="Process Order" >
</form>
</body>
</html> 
</html>

Open in new window

ASKER CERTIFIED SOLUTION

soupBoy

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

sabecs

ASKER

Thanks soupBoy, I have to assign points and your comments helped me get a solution, much appreciated...