CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Locke
Locke

Reputation: 671

Submit form when enter key is pressed

I currently have a live chat room up and running and just asked some users what I can do to make the chat room even better. One thing that was asked multiple times was this...

"Can you please add a feature where pressing the enter button will send my message instead of adding a new line in the text box?"

I tried to apply some jQuery from a different post on StackOverflow but couldn't get it to work. Here is my current code...

jQuery:

<!-- jQuery for submitting form -->
<script>
var msgForm = false;

      $(function () {

    $('.expand').keyup(function(event) {
        if (event.keyCode == 13) {
        this.form.submit();
            msgForm = true;
            return true;
         }
    });

    if( msgForm = true ) {
        $('#formSend').on('submit', function (e) {

          e.preventDefault();

          var formData = $('form').serialize();
          $('.expand').prop("disabled", true)

          $.ajax({
            type: 'post',
            url: 'send.php',
            data: formData,
            success: function () {
              $(".expand").val('');
              $('.expand').prop("disabled", false) 
            }
          });

        });
        }

      });

    </script>

Here ^^ an Ajax request is made to send the message so no page refresh is involved like a usual form.

Here is the HTML markup for the form if needed...

  <form action="send.php" method="post" name="formSend" id="formSend" />
     <textarea id="styled" class="expand" name="msg" placeholder="Your Message Here" onfocus:"setbg(\'#e5fff3\');"required></textarea>
     <input type="submit" name="submit" value="Send" class="send" />
  </form>

Upvotes: 2

Views: 6927

Answers (3)

user3797653
user3797653

Reputation:

Why not just put them in one action. No need to separate. Like this:

<form action="send.php" method="post" name="formSend" id="formSend" />
    <textarea id="styled" class="expand" name="msg" placeholder="Your Message Here" onfocus:"setbg(\'#e5fff3\');" required></textarea> <br/>
    <input type="submit" name="submit" value="Send" class="send" />
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('.expand').keyup(function(event) {
        if(event.keyCode == 13) {
            var formData = $('#formSend').serialize();
            $(this).prop('disabled', true);
            console.log(formData);
            $.ajax({
                type: 'POST',
                url: 'send.php',
                // url: document.URL,
                data: formData,
                success: function(response) {
                    $('.expand').attr('placeholder', 'Sending Message...');
                    setTimeout(function(){
                        $('.expand').attr('placeholder', 'Your Message Here').prop('disabled', false);
                        // sample delay
                    }, 1000);
                    $(".expand").val('');
                }
            });
        }
    });
});
</script>

Upvotes: 2

HTTP
HTTP

Reputation: 1724

Why not trigger an event click if the user press the enter key

$('selector').on('keyup', function(e) {
  if(e.which == 13) {
      $('button_selector').trigger('click');
  }
}

$('button_selector').on('click', function() { 
 //do ajax request here.....
});

// get from my code hope it hepls....

Upvotes: 1

Antoine Cloutier
Antoine Cloutier

Reputation: 1330

I just tested this in a jsfiddle and it works fine.

html:

<form>
    <textarea></textarea>
    <input type="submit" value="Submit"/>
</form>

javascript:

$("textarea").keyup(function(event){
    if(event.keyCode == 13){
        $("form").submit();
    }
});

$("form").on('submit', function(e){
    e.preventDefault();
    alert('abcde');
});

Demo

Upvotes: 4

Related Questions