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.';
	}
}

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

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

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! :)