/    Sign up×
Community /Pin to ProfileBookmark

Need a little help on form submission with IE

I am trying to add some javascript that will allow the user of a text chat box to submit what they’ve typed by hitting the enter key instead of having to click on the send key. Got it to work in Firefox, but it doesn’t work in the two versions of IE I’ve tried.

After googling on this subject, I found the following javascript fucntion that is supposed to work with IE as well as others:

function catchEnter(e) {
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;

if (code==13) {
document.messageform.submit();
document.forms[1].elements[1].value = ”;
}
}

The if(e.keyCode) line is supposed to pick up the key code, “13” of the enter key for IE browsers. The if(code==13){ } part contains the same code that I use successfully for the send button. It is supposed to submit the form and it also erased what’s on the input line.

The relevant code in the form looks like this:

<form name=”messageform” action=”handlechat.php” method=”post” target=”chatwindow” style=”margin: 0px 0px 0px 0px;”>
<iframe name=”chatwindow” width=”1″ height=”1″ align=”center” scrolling=”no”>
</iframe>
<br />
<b>Character Name:</b> <input type=”text” name=”array[name]” size=”38″ maxlength=”50″ />
<br />
<div>
<b>Message:</b> <input type=”text” name=”array[message]” id=”messg” size=”65″ maxlength=”500″ onKeyPress=”catchEnter(event)” />
</div>
print <input type=”button” name=”send” value=”Snd” style=”width: 35px” onClick=”sendText()”/>
</form>

Notice that there are two input lines in the form.

(Also note: the sendText function is another function that takes care of the send button press:
function sendText() {
document.messageform.submit();
document.forms[1].elements[1].value = ”;
}
– it works fine and is not an issue here.)

This all works fine when I use the enter key or the send button in Firefox. In IE 5 and 6, nothing gets submitted when I press the enter key, but the text disappears like it’s supposed to. The send button works OK.

Does anyone know what might be going wrong in IE?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@FangJun 20.2008 — Works in IE6
Copy linkTweet thisAlerts:
@rgrneauthorJun 20.2008 — Thanks for your reply, but it definitely doesn't work in my IE6 browser...

1) Maybe my settings are wrong?? Do you know which settings might effect this, and can you tell me how they're set on your browser? I am allowing active scripting and have security set to medium. This script is for a game related site so there's no problem telling users how to set their browsers to use it properly, I'm already planning to do that.

2) In the real script there are more buttons after the send button having to do with selecting color for the text and saving text. I didn't include them in the code above because I didn't think they were relevant - but could they be confusing IE somehow?? I could post the rest of the script.
Copy linkTweet thisAlerts:
@FangJun 20.2008 — The snippet given works, so there is probably something else causing the problem.
Copy linkTweet thisAlerts:
@rgrneauthorJun 22.2008 — I've resolved the first problem, only to discover another. The reason it wasn't doing anything was that for some reason IE insisted on sending the value of the first input button it came across in the form, which was causing the form handler (PHP) to go into the wrong if/else section (there are a series of type="submit" buttons right after the send button that I didn't copy here, having to do with saving messages). I sort of solved that by putting a dummy one pixel wide button next with a value that didn't cause the handler to go off on a tangent.

Now when I press return in IE, it sends, and displays, the value in the first text field (the name) but not the second text field, where the message is. I verified that nothing from that field was getting through by trying to print out the name and the message before the form handler got into any if statements. I tried a few random things like getting rid of the div tags, but to no avail.

It still works OK in Firefox.

How do I get IE to send the information in both fields when the return key is pressed? I also want people to be able to use the send button if they wish.
×

Success!

Help @rgrne spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...