[HTML/JavaScript]: If a function inside onClick() fails, do not submit

Question

<input type="image" src="images/join.gif" name="SubmitStudent" onClick="CheckCaptcha();CheckTermsAcceptance(document.getElementById('chkStudent'));" width="98" height="31"/>

In the above code, if either the function CheckCaptcha or CheckTermsAcceptance returns False, than Form should not be submitted. How to check this?

Answer 1

You may use the code below:

function validate(){
return (CheckCaptcha() && CheckTermsAcceptance(document.getElementById('chkStudent')));

}

<input type="image" src="images/join.gif" name="SubmitStudent" onclick="return validate()" width="98" height="31"/>

Answer 2

To abort from an onclick handler, return false.

return CheckCaptcha() && CheckTermsAcceptance(document.getElementById('chkStudent'));

Answer 3

I would make it a separate function

<input type="image" src="images/join.gif" name="SubmitStudent" onClick="mySubmit();" width="98" height="31"/>
<script type="text/javascript">
function mySubmit() {
  if(!CheckCaptcha()) return false;
  if(!CheckTermsAcceptance(document.getElementById('chkStudent'))) return false;
  else document.myform.submit();
}
</script>

Answer 4

<input onClick="return onclickEvent(e)" width="98" height="31" type="image" src="images/join.gif" name="SubmitStudent" />

function onclickEvent(e){
  return CheckCaptcha() && CheckTermsAcceptance(document.getElementById('chkStudent'));
}

Or even

<input onClick="return CheckCaptcha() && CheckTermsAcceptance(document.getElementById('chkStudent'))" width="98" height="31" type="image" src="images/join.gif" name="SubmitStudent" />

Much better with jquery:

<input id="your-id" type="image" src="images/join.gif" name="SubmitStudent" width="98" height="31"/>


$("your-id").click(function(){
    return CheckCaptcha() && CheckTermsAcceptance(document.getElementById('chkStudent'));
});

Answer 5

Here it is:

<input type="image" src="images/join.gif" name="SubmitStudent" onClick="return (CheckCaptcha() && CheckTermsAcceptance(document.getElementById('chkStudent')))" width="98" height="31"/>

Answer 6

What about not using onclick altogether? I'm surprised how much I see this stuff here. Bind a listener to the button, start by preventing the default behaviour either returning false or using the browser-specific stuff, then do your checks and stuff and finally either call submit or return false.