submit form on enter

  • Drewbarb
  • Born
  • Born
  • Drewbarb
  • Posts: 2

Post 3+ Months Ago

Hey,

So, I was going over a form that I had made previously made for an ajax chat system. At the moment, it submits when a button is clicked, but I'd like to make it do this when the enter key is pressed.

The form works, but only when a button is clicked.

I've tried a few methods; however, they haven't worked. Could you please give me some suggestions on how to make it submit on enter?

Here is the current form:

Code: [ Select ]
<form method="post" id="chatform">
<input type="text" id="message" name="message" size="60"> <input style="margin: 0px;" type="button" class="submit" value="Post" name="post_chat" onclick="postd_chat(); return false;">
</form>
  1. <form method="post" id="chatform">
  2. <input type="text" id="message" name="message" size="60"> <input style="margin: 0px;" type="button" class="submit" value="Post" name="post_chat" onclick="postd_chat(); return false;">
  3. </form>


The function:

Code: [ Select ]
<script type="text/javascript">
new Ajax.PeriodicalUpdater('chat', '***/system/user/ajaxchat.php', {method: 'get', frequency: 2, decay: 1});
new Ajax.PeriodicalUpdater('current_chatters', '***/system/user/ajaxchat.php?do=users', {method: 'get', frequency: 5, decay: 1});

function trim(stringToTrim) {
  return stringToTrim.replace(/^\s+|\s+$/g,"");
}

function postd_chat(){
  if(trim($('message').value) == ''){
    alert("Please enter a message!");
  }else{
    var url = '***/system/user/ajaxchat.php?do=post';
    new Ajax.Request(url, {
      method: 'post',
      parameters: $('chatform').serialize(true),
      onSuccess: function(obj){
        $('message').value = '';
      }
    });
  }
}
</script>
  1. <script type="text/javascript">
  2. new Ajax.PeriodicalUpdater('chat', '***/system/user/ajaxchat.php', {method: 'get', frequency: 2, decay: 1});
  3. new Ajax.PeriodicalUpdater('current_chatters', '***/system/user/ajaxchat.php?do=users', {method: 'get', frequency: 5, decay: 1});
  4. function trim(stringToTrim) {
  5.   return stringToTrim.replace(/^\s+|\s+$/g,"");
  6. }
  7. function postd_chat(){
  8.   if(trim($('message').value) == ''){
  9.     alert("Please enter a message!");
  10.   }else{
  11.     var url = '***/system/user/ajaxchat.php?do=post';
  12.     new Ajax.Request(url, {
  13.       method: 'post',
  14.       parameters: $('chatform').serialize(true),
  15.       onSuccess: function(obj){
  16.         $('message').value = '';
  17.       }
  18.     });
  19.   }
  20. }
  21. </script>


Thanks in advance.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Make the postd_chat function return false.

Give your <form> an action attribute, point it at the current page or something that explains Javascript needs to be enabled, but make sure it has that action attribute.

Add an onsubmit attribute to the form and point it to your postd_chat function.

Code: [ Select ]
<form ... onsubmit="return postd_chat();">


Swap out type="button" with type="submit" on your button. Remove the onclick attribute from it.

Since you're using type="text" for your message input box your postd_chat function should be triggered both when the submit button is clicked and when enter is pressed. Having the postd_chat function return false will prevent the form from being submitted to the address in the action attribute like the "return false;" in your buttons onclick attribute was doing.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 121 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.