onclick event on submit in ie7

[rayarman]

Hi,

I have the following HTML code:

<form>
<label for="searchtxt">Find a Question...</label>
<input type="text" name="searchtxt" id="searchtxt" maxlength="200" size="92" />

<input type="submit" id="searchsbmt" name="searchsbmt" value="Search" onclick="return getquestions(0,5);" />
</form>

the function getquestions is sending some variables via ajax and returning to populate a div. when it finishes, it returns false.

This works as intended in firefox when click on hitting enter, but in ie7 it submits the form on hitting enter.

I have other forms like this working as intended in ie7 so am really confused as to what i've done wrong!

Why won't it return false on hitting enter in ie7?

Any suggestions, thanks in advance :)

[rayarman]

So the solution is to add another one and use css to hide it.

<input name="" type="t" value="" style="display:none">

I added the above and now it works, any ideas as to why this happens?

if there is a single input field within the form, many browsers submit the forms automatically when the enter key is hit.

Try

1. Add another input field. Hide it by styling it so it isn't visible. (e.g., <input type="text" name="bogusField" style="display: none;" />
2. Block the enter key form submit behavior within a JavaScript event handler (e.g., here or here). Even better, use a GUI toolkit that may help with this (e.g., GWT)

[Graphix]

I see you found a solution for it yourself. However the way you solved is a bit on a cumbersome manner. If you want a form to not be submitted, you just adjust the form tag:

<form action="" method="post" onsubmit="return false;">
...
... The form
...
</form>

This way, also when the user presses the enter-button on his keyboard, the form won't be submitted.

~G

[rayarman]

Thanks for the reply Graphix,

I tried your method to test, but that works for ajax where i don't want the form to be submitted at all.

However, within IE7 where i want the form to be validated by jscript before submission, the return false 'onclick' won't hold the form from submitting on pressing the enter button.

If i include the return false on the forms 'onsubmit' event, then the page is still refreshed but the form variables are not sent!

It's really strange? any thoughts...thanks!

[Graphix]

I assume somewhere in the javascript function that validates the form stands document.getElementById("someForm").submit() when/where the form has passed the validation.

The remedy to this solution is to let the function return a false or a true value, and use that within the onsubmit event (so remove the document.getElementById("someForm").submit() in the function):

The javascript:

function validForm() {
var valid = true;
if (document.getElementById("someTextField").value == "") {
valid = false;
}
// Here comes the rest of the validation
return valid;
}

The form:

<form action="formhandler.php" method="post" onsubmit="return validForm();">
...
... The form
...
</form>

~G