Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 2171

Feb 1st, 2010

onclick event on submit in ie7

Expand Post »

Hi,

I have the following HTML code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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

Last edited by rayarman; Feb 1st, 2010 at 8:15 pm.

Similar Threads

Call a function by onclick event in PHP
add onclick event programmatically in JavaScript / DHTML / AJAX
onClick event to trigger PHP function for Simplepie feeds in JavaScript / DHTML / AJAX
Radio buttons: Preventing the onClick event if the radio button is already checked in JavaScript / DHTML / AJAX
products order in onclick event in PHP

rayarman

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

12 posts
since Sep 2009

Permalink

Feb 1st, 2010

Re: onclick event on submit in ie7

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<input name="" type="t" value="" style="display:none">
<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)

Last edited by rayarman; Feb 1st, 2010 at 9:03 pm.

rayarman

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

12 posts
since Sep 2009

Permalink

Feb 2nd, 2010

Re: onclick event on submit in ie7

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<form action="" method="post" onsubmit="return false;">
...
... The form
...
</form>
<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

Graphix

Reputation Points: 82

Solved Threads: 74

Posting Pro in Training

Offline

400 posts
since Aug 2009

Permalink

Feb 10th, 2010

Re: onclick event on submit in ie7

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!

rayarman

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

12 posts
since Sep 2009

Permalink

Feb 11th, 2010

Re: onclick event on submit in ie7

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function validForm() {
var valid = true;
if (document.getElementById("someTextField").value == "") {
valid = false;
}
// Here comes the rest of the validation
return valid;
}
function validForm() {
var valid = true;
if (document.getElementById("someTextField").value == "") {
valid = false;
}
// Here comes the rest of the validation
return valid;
}

The form:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<form action="formhandler.php" method="post" onsubmit="return validForm();">
...
... The form
...
</form>
<form action="formhandler.php" method="post" onsubmit="return validForm();">
...
... The form
...
</form>

Last edited by Graphix; Feb 11th, 2010 at 3:23 am.

Graphix

Reputation Points: 82

Solved Threads: 74

Posting Pro in Training

Offline

400 posts
since Aug 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: web browser

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Captcha code

DaniWeb Message

Cancel Changes

User Name
Password