Stop form submit with onClick?

[madkat3]

I'm using an image as my submit button. I want it to check to ensure all boxes have a value before submitting (I will make the verification more stringent later), and if there is none, to cancel the form submission. I created a readonly input box that changes from white to a visible color to use as a status indicator for now. It displays the correct status in either scenario, but return false doesn't seem to be stopping the page from loading. What function would do that? Thanks. :)

<form method="post" action="send.php">

...

...

<input type=image src="submitbutton.jpg" 

alt="Click Here To Submit" onClick="javascript:sendform();"></form>

Earlier in the page I created the function below...

function sendform(){
//verification script.
	if ((document.forms[0].variable1.value=="") || (document.forms[0].variable2.value=="") || (document.forms[0].variable3.value==""))
	{
	//Update the sending status.
	document.forms[0].statusindicator.value='Please fill in all forms.';
	alert("Please fill in all forms. Thanks.");
	return false;
	} else {
	//Update the sending status.
	document.forms[0].statusindicator.value='Sending...Please Wait.';
	}
}

[parry_kulk]

To prevent a form from submitting, the validating function must be called from the onsubmit event of the <form> tag and this function should than return true or false.

e.g You will need to use something like the code given below

<form method="post" action="send.php" onsubmit="return sendform()">

Now if the function sendform() returns false it will not submit the form and if the function sendform() returns true the form is submitted

Hope this was helpful

[katarey]

try this

JavaScript

<script type="text/javascript">
function sendform(){
//verification script.
   // 
	if ((document.getElementById('variable1').value=="") || (document.getElementById('variable2').value=="") || (document.getElementById('variable3').value==""))
	{
	//Update the sending status.
		document.getElementById('statusindicator').value='Please fill in all forms.';
		alert("Please fill in all forms. Thanks.");
	return false;
	} else {
	//Update the sending status.
		document.getElementById('statusindicator').value='Sending...Please Wait.';
		document.getElementById('frm').submit();
	}
}
</script>

HTML

<form method="post" id="frm" action="send.php">
  <input name="variable1" id="variable1" type="text" />
  <input name="variable2" id="variable2" type="text" />
  <input name="variable3" id="variable3" type="text" />
  <input name="statusindicator" id="statusindicator" type="text" />
  <img src="images/StagSubmitButton.png" width="86" height="28" alt="Click Here To Submit"  onClick="return sendform()" style="cursor:pointer;" />
</form>

hope this will help
Katarey

[madkat3]

try this

JavaScript

<script type="text/javascript">
function sendform(){
//verification script.
   // 
	if ((document.getElementById('variable1').value=="") || (document.getElementById('variable2').value=="") || (document.getElementById('variable3').value==""))
	{
	//Update the sending status.
		document.getElementById('statusindicator').value='Please fill in all forms.';
		alert("Please fill in all forms. Thanks.");
	return false;
	} else {
	//Update the sending status.
		document.getElementById('statusindicator').value='Sending...Please Wait.';
		document.getElementById('frm').submit();
	}
}
</script>

HTML

<form method="post" id="frm" action="send.php">
  <input name="variable1" id="variable1" type="text" />
  <input name="variable2" id="variable2" type="text" />
  <input name="variable3" id="variable3" type="text" />
  <input name="statusindicator" id="statusindicator" type="text" />
  <img src="images/StagSubmitButton.png" width="86" height="28" alt="Click Here To Submit"  onClick="return sendform()" style="cursor:pointer;" />
</form>

hope this will help
Katarey

Perfect! I knew it was just something really small. Just needed to add "return" to my onclick event. Worked like a charm. Thanks! :)