CODEWITHSUNDEEP
javascriptjqueryajax
bɪˈɡɪnə
bɪˈɡɪnə

Reputation: 1085

How to submit data on pressing enter key (jQuery)?

I have a ajax php comment system which works fine but it submits data on pressing comment button. I want to give some fancy touch and remove comment button, means comment will be submitted on enter key.

<form method='post' name='form' action=''>
<input type='text' name='comment' id='comment' placeholder='Write a comment....' />
<input type='button' name='submit' id='submit' value='Comment'/>
</form>

<script type="text/javascript" >
$(function() {
     $("#submit").click(function() {
        var test = $("#comment").val();
        var comment = test;
        var id = '<?php echo $id ?>';
        if (test == '') {
          alert("Please Enter Some Text");
        } else {

          $.ajax({
            type: "POST",
            url: "comment.php",
            data: {comment : comment,id : id},
            cache: false,
            success: function(html) {
              $(".coments").prepend(html);
              $("#comment").val('');
            }
          });

        }
        return false;
      });
    });
    </script>

Code above is with comment button and works fine. Now I am trying to submit comment on enter key:

<script type="text/javascript" >
$(function() {
     $('#comment').keyup(function(e) {
if(e.keyCode == 13) {
        var test = $("#comment").val();
        var comment = test;
        var id = '<?php echo $id ?>';
        if (test == '') {
          alert("Please Enter Some Text");
        } else {

          $.ajax({
            type: "POST",
            url: "comment.php",
            data: {comment : comment,id : id},
            cache: false,
            success: function(html) {
              $(".coments").prepend(html);
              $("#comment").val('');
            }
          });

        }
        return false;
       }
      });
    });
    </script>

This code does not work on pressing enter key page is refreshed no comment is submitted.

Upvotes: 0

Views: 4343

Answers (6)

Maddy
Maddy

Reputation: 105

If you are okay without <form> tag. Remove it and you are good to go.

Upvotes: 0

Little Phild
Little Phild

Reputation: 805

Adjust input="button" to <input type='submit' name='submit' id='submit' value='Comment'/>.

But if you don't want the submit button to appear you can still hide it with css<input type='button' name='submit' id='submit' value='Comment' style="display:none;" />

And then you do your magic to submit the form using jQuery

        $(function() {
      $('#comment').keyup(function(e) {
        if (e.keyCode == 13) {

           var test = $("#comment").val();
  var comment = test;
  var id = '<?php echo $id ?>';
  if (test == '') {
    alert("Please Enter Some Text");
  } else {

    $.ajax({
      type: "POST",
      url: "comment.php",
      data: {comment : comment,id : id},
      cache: false,
      success: function(html) {
        $(".coments").prepend(html);
        $("#comment").val('');
      }
    });

    }
        }
      });

Upvotes: 1

shuizhongyuemin
shuizhongyuemin

Reputation: 579

The browser will automatically submit when there is only one input[type=text] in the form and press a enter in the input.

To fix this, you can simply add another useless input[type=text] under the form like this: 

<form method='post' name='form' action=''>
    <input type='text' name='comment' id='comment' placeholder='Write a comment....' />
    <input type="text" style="display: none;" name="nothing" value="nothing" />
    <input type='button' name='submit' id='submit' value='Comment'/>
</form>

Upvotes: 0

twhb
twhb

Reputation: 4604

Submitting on enter is actually default behavior here. What you want to do is hook in to the submit event, rather than trying to catch everything that will later cause a submit event. So:

  • Listen for just submit on the form element, not click or keydown.
  • In the submit handler, call event.preventDefault() to prevent the form from submitting and reloading the page.

In code:

$("form").on("submit", function(e) {
  e.preventDefault();

  var test = $("#comment").val();
  var comment = test;
  var id = '<?php echo $id ?>';
  if (test == '') {
    alert("Please Enter Some Text");
  } else {

    $.ajax({
      type: "POST",
      url: "comment.php",
      data: {comment : comment,id : id},
      cache: false,
      success: function(html) {
        $(".coments").prepend(html);
        $("#comment").val('');
      }
    });

  }
});

Upvotes: 0

Abdulrahman Alhemeiri
Abdulrahman Alhemeiri

Reputation: 675

Since you don't want to reload the page, I suggest you change the form element to a div element. This way, you handle the requests yourself.

<div>
  <input type='text' name='comment' id='comment' placeholder='Write a comment....' />
  <input type='button' name='submit' id='submit' value='Comment' />
</div>

Here's a quick fiddle: https://jsfiddle.net/w2fepLak/

Upvotes: 1

Simon Boudrias
Simon Boudrias

Reputation: 44649

If you have a button type submit, then it'll automatically submit when pressing the enter key - no JS, no magic needed!

<input type='submit' name='submit' id='submit' value='Comment'/>

Upvotes: 0

Related Questions