CODEWITHSUNDEEP
javascriptphpjquery
claudios
claudios

Reputation: 6666

Calling a click function when pressing the Enter key

I've been having a hard time figuring out why keypress won't work. No, I mean it's working but the result returned is json. I wanted to return the html like when I press the Post button. How can I make the enter key and a button click functions the same? Thanks! This is my code so far.

Note: The code works fine after clicking the post comment button but returns a json data if pressing enter key.

JS:

function commentApp(item_id){
  $('.js-post-button').on('keypress click', function(e){
    var url = $('form#js-post-comment').attr('action');
    if (e.which === 13 || e.type === 'click') {
    $.ajax({
      type     : 'POST',
      url      : url,
      dataType : 'json',
      data     : $('#js-post-comment').serialize(),
      success  : function(result) {
        $('#js-input-comment').val('');
        showComments(item_id);
      }
    });
    }
  });
}

function showComments(item_id) {
  var url = $('#js-comment').attr('data-url');
  $.ajax({
    url       : url+'/comments/'+item_id,
    type      : "POST",
    dataType  : "html",
    success   : function(result) {
      $('#js-comment').html(result);
    }
  });
}

PHP:

$data = array(
      'checklist_item_id' => $id,
      'comment'           => $this->input->post('comment'),
      'date_posted'       => date('Y-m-d h:i:s'),
      );

    $this->item_comments->insert($data);
    echo json_encode($data);

HTML:

<form id="js-post-comment" method="post" role="form" action="<?php echo site_url('document_items/add_comment/'.$value['checklist_item_id'])?>">
   <div class="input-group">
    <input id="js-input-comment" type="text" class="form-control" name="comment" placeholder="Write a comment...">
     <span class="input-group-btn">
       <button class="js-post-button btn btn-default" type="button">Comment</button>
     </span>
    </div><!-- /input-group -->
</form>

Upvotes: 0

Views: 1377

Answers (4)

Varghese
Varghese

Reputation: 21

You can also detect the Key pressed and execute certain functions. For e.g say on "enter/ return " key, trigger the submit function. Found it here http://www.moreonfew.com/how-to-identify-keycode-or-key-pressed-in-jquery/

Upvotes: 0

Andreas Louv
Andreas Louv

Reputation: 47099

You should listen to submit event on the form:

$('#js-post-comment').on('submit', function(event) {
  event.preventDefault(); // stop form from making native submit

  var url = $(this).attr('action');
  $.ajax({
    type     : 'POST',
    url      : url,
    dataType : 'json',
    data     : $(this).serialize(),
    success  : function(result) {
      console.log('Do something with result:');
      console.log(result);
    }
  });
});

Upvotes: 1

weigreen
weigreen

Reputation: 1242

I think your problem is that you use the wrong event.

In your code, you register keypress & click event on .js-post-button so that mean the button been clicked or button have keypress.

You can see the following code: http://jsbin.com/duteziraza/edit?html,js,console,output

You can see when will each event have been called.

Maybe change your keepress event as following will fix your problem:

function submitFunction(item_id){
  console.log('in submit function');
  var url = $('form#js-post-comment').attr('action');
  $.ajax({
      type     : 'POST',
      url      : url,
      dataType : 'json',
      data     : $('#js-post-comment').serialize(),
      success  : function(result) {
        $('#js-input-comment').val('');
        showComments(item_id);
      }
    });
}

function commentApp(item_id){
  $('.js-input-comment').keypress(function(e){
    if (e.which === 13){
      e.preventDefault();
      submitFunction(item_id);
    }
  });

  $('.js-post-button').on('click', function(e){
    submitFunction(item_id);
  });
}

Upvotes: 1

RohanArihant
RohanArihant

Reputation: 2750

I want to share javascript code which help you to call a function when enter key is pressed

<script>
function myFunction(event) {
var x = event.which || event.keyCode;
if(x == 13){
youWantToCall();
}
function youWantToCall(){
alert('you type enter key');
}
}
</script>

Upvotes: 0

Related Questions