Form is submitting when it shouldnt 1

RJRatLD · Jun 15, 2004

Hi,
I have a form that has two inputs of type=image.
Each of these have onClick events that submit the form.
My first image works fine as it is a straigforward submit but the second image should submit the form if a javascript function returns true. Regardless of the return value of my javascript function the form is being submitted.

Response.write "<input alt='Update' type='image' src='tick.gif' onClick='this.form.ipressed.value=" &chr(34) & "Update" &chr(34) & ";if (validateData(document.f1)) this.form.submit();'>"

I have even tried replacing the submit part with an alert window, this works fine, but it still submits the form.

Is it correct for the onclick event of the image to submit the form? If not can anyone shed any light on why it may be doing this.

BillyRayPreachersSon · Jun 15, 2004

Image input types submit the form by default, so if you do not want the submit to go ahead, you need to return(false) in your onclick.

Hope this helps,
Dan

kaht · Jun 15, 2004

Your problem isn't that the function isn't evaluating correctly. The problem is this: Inputs of type image act as submit buttons by default. This line: this.form.submit() isn't even necessary (and might actually be submitting your form twice when it evaluates true, I'd get rid of it) The solution to this problem is easy, take the onclick off of the image tag and do all your form validation via the onsubmit parameter of the form tag. Here's an example:

Code:

<html>
<head>
<script language=javascript>
function validateSubmit() {
   return (blahForm.blahCheckbox.checked) ? true : false;
}
</script>
</head>
<body>
<form name=blahForm onsubmit='return validateSubmit()'>
<input type=checkbox name=blahCheckbox>check me or submit fails<br>
<input type=image src='whatever.gif'>
</form>
</body>
</html>

The function returns true if the checkbox is checked and false if it's not checked. The onsubmit parameter then returns this value. If it returns true, the page is submitted. If it returns false, the page is not submitted.

-kaht

adam0101 · Jun 15, 2004

I'm not sure that you can cancel the click event of an <input type="image">. If this doesn't work:

Code:

Response.write "<input alt='Update' type='image' src='tick.gif' onClick='this.form.ipressed.value=" &chr(34) & "Update" &chr(34) & ";if ([b]![/b]validateData(document.f1))[b]{return false}[/b]'>"

Then try this:

Code:

Response.write "<a href='' onClick='this.form.ipressed.value=" &chr(34) & "Update" &chr(34) & ";if (validateData(document.f1)) {document.f1.submit()};return false'><img alt='Update' src='tick.gif'></a>"

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

RJRatLD · Jun 15, 2004

Many thanks for all your help.

I have managed to get it working by using...

Response.write "<input alt='Update' type='image' src='tick.gif' onClick='this.form.ipressed.value=" &chr(34) & "Update" &chr(34) & ";if (validateData(document.f1)) {this.form.submit();};else return false;'>"

Not sure if the validation would work if I put it in the forms onclick event as the other image is used for deleting a record rather than updating it and I dont want to validate the details if they are being deleted.

Again, many thanks for the help.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Form is submitting when it shouldnt 1

RJRatLD

Programmer

BillyRayPreachersSon

Programmer

kaht

Programmer

adam0101

Programmer

RJRatLD

Programmer

Similar threads

Part and Inventory Search

Sponsor