/    Sign up×
Community /Pin to ProfileBookmark

Form submit on enter, allow newlines

Copy linkTweet thisAlerts:
Jan 02.2005

Hi,

I have a form with one <textarea> field that submits the form when the user presses “enter”. But I would like that users could enter newlines by pressing ctrl+enter, shift+enter or some similar combination.

Is that possible, and if it is, then how can I do it?

The current code is the following:

…
<script type=”text/javascript”>
<!–
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
document.chat_form.submit();
return false;
}
else
return true;
}
//–>
</script>
…
<textarea onKeyPress=”return submitenter(this,event)”> </textarea>
…

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@pj59Jan 02.2005 — Hello!

From my point of view, your approach is not logical. You avoid the normal "newline" in a form field and have the form submitted on pressing enter. Wouldn't it be much more practical to leave the textarea's functionality untouched and provide an "as-easy-as-possible" way for the user to submit the form without using his mouse?

You would have to tell the user how to do that, just like you would if the new line required something "special".

PJ
Copy linkTweet thisAlerts:
@CharlesJan 02.2005 — It's a standard practice in programming to use "n" for a new line. It might work with real people too.
Copy linkTweet thisAlerts:
@zaajatsauthorJan 02.2005 — The code is for an instant messenger type application, where it would be convenient for the user to use [enter] to send the message.

But in, for example MSN messenger, I often use line breaks (ctrl+enter) to make my text clearer, so I thought this would be a useful function.
Copy linkTweet thisAlerts:
@KorJan 03.2005 — try:

using also onkeydown/onkeyup events to modify a parameter in case SHIFT or CTRL is pressed/released. Use this parameter as a condition to not submit/submit form when Enter is pressed.

something like:

var param;

function checkE(e){

if(SHIFT or CTRL is pressed)

param = 1;

if(SHIFT or CTRL is released)

param = 0;

}

function submitenter(myfield,e)

if(param==0){

... now the rest of your code...

...

<textarea onKeyPress="return submitenter(this,event)" onkeydown="checkE(event)" onkeyup="checkE(event)"> </textarea>
Copy linkTweet thisAlerts:
@pj59Jan 03.2005 — I would not use ctrl+enter for the line breaks. Both Mozilla and IE wouldn't deal with it. Opera does so (depending on version and settings).

Shift+enter would be better due to that. If you like, I can make a little script which does what you want.

PJ
Copy linkTweet thisAlerts:
@zaajatsauthorJan 03.2005 — [i]Originally posted by pj59 [/i]

[B]I would not use ctrl+enter for the line breaks. Both Mozilla and IE wouldn't deal with it. Opera does so (depending on version and settings).

Shift+enter would be better due to that. If you like, I can make a little script which does what you want.

[/B][/QUOTE]

pj59,

I would really appreciate if you wrote the script, I am not really an expert in javascript.

Thanks in advance.
Copy linkTweet thisAlerts:
@pj59Jan 03.2005 — Hello!

Just the basics:[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var isShift=null;
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
var OP = (navigator.appName.indexOf("Opera")!=-1);
if(OP)isNN=true;
var key;
function shift(event){
key = (isNN) ? event.which : event.keyCode;
if (key==16)isShift=1;
}
function process(event){
key = (isNN) ? event.which : event.keyCode;
if(document.layers&&event.modifiers==4){
isShift=1;
}
if (key==13&&isShift!=1){
document.myForm.submit();
}
if (key!=16)isShift=null;
}
function retrieve(){
document.myForm.text1.focus();
if(location.search.length>0){
blubb=unescape(location.search.split('=')[1]);
document.myForm2.text2.value=blubb;
}
}
//-->
</script>
</head>
<body onload="retrieve()">
<form name="myForm">
<textarea name="text1" onkeypress="process(event)" onkeydown="shift(event)" cols="50" rows="7"></textarea><input type="submit" accesskey="s" value="Send">
</form><br><br>
This second textarea is just to show, that the line breaks "arrive":<br>
<form name="myForm2">
<textarea name="text2" cols="50" rows="7"></textarea>
</form>
</body>
</html>[/code]Tested in Opera (5.02 and 6.05), Netscape (4.7, 6.2.2 and 7.02), Mozilla 1.5 and IE 6.

Apart from the focussing of the upper textarea, the function retrieve and its' call in the body tag are just for playing, just like the second form with the lower text area.

Regards PJ
Copy linkTweet thisAlerts:
@zaajatsauthorJan 03.2005 — Works like a charm, thanks a lot PJ
Copy linkTweet thisAlerts:
@pj59Jan 03.2005 — You're welcome! ?

PJ
Copy linkTweet thisAlerts:
@Coruba67Feb 21.2009 — Hi guys, I know this thread has been dead for a while now, its just I went through it with the same issue, however my browser is reporting that

"The object doesn't support this property or method"

referring to the part in the javascript

document.sendmessage.submit();

sendmessage being the name of my form. Any idea's what gives?
×

Success!

Help @zaajats 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.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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