SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form submit with <enter>

    Hi,guys! I try to do submit form by clicking the enter key in the last field of my form which is textarea.However,it's not work,anything went wrong?

    HTML Code:
    <TEXTAREA COLS="30" ROWS="10" NAME="enquiry" onkeypress="if (event.keyCode == 13) {this.enquiry.submit();}"></TEXTAREA>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    That's a usability nightmare!

    If someone wants to write a multiline piece, like the one I'm writing now, they're going to be sadly mistaken when they press the enter key. Why can you not use a normal text input line?

    If you want to stay with the textarea with enter submitting the form, you should add a comment above the textarea that specifies this fact.
    There's no point including the comment in the content, because without javascript that comment is meaningless.

    Also, IE doesn't detect the enter key as onkeypress, therefore we'll use onkeydown instead.
    See http://www.quirksmode.org/js/keys.html

    Have the textarea as follows

    Code javascript:
    <textarea cols="30" rows="10" id="enquiry" name="enquiry"></textarea>

    and include this at the end of the body content

    Code javascript:
    var enquiry = document.getElementById('enquiry');
    // create warning
    var warning = document.createDocumentFragment();
    warning.appendChild(document.createElement('br'));
    warning.appendChild(document.createTextNode('Press <Enter> in the text area to send.'));
    // attach warning
    if (enquiry.nextSibling) {
        enquiry.parentNode.insertBefore(warning, enquiry.nextSibling);
    } else {
        enquiry.parentNode.appendChild(warning);
    }
    // attach event
    enquiry.onkeydown = submitOnEnter;
     
    // process event
    function submitOnEnter(evt) {
        evt = evt || window.event;
        var keyCode = evt.charCode || evt.keyCode;
        if (evt.keyCode === 13) {
            this.form.submit();
        }
    }

    It's up to you whether you keep the warning code in the script or as html text in the content, but my recommendation is to have the script provide the content that is only meaningful when scripting is available.

    If the warning is not provided in some manner though, there will be upset people and you will receive forms that have "hi," as the only part of the enquiry.

    With such steps in place, you can also avoid annoying prompt boxes that say "Are you sure you wish to submit this form" because people accidentally submit it when they don't intend to.
    Last edited by paul_wilkins; Feb 16, 2008 at 03:58.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank for your suggestion.Do you mean I attach the javascript after </body> ?
    How does submitOnEnter(evt) being called?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Not after </body>, but at the end of the body.

    Code javascript:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Test page</title>
    </head>
    <body>
    <script>
    </script>
    </body>
    </html>

    See http://javascript.crockford.com/code.html and http://developer.yahoo.com/performance/rules.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •