How to Submit textarea comment on Enter key?

[eluser]Volkof[/eluser]
Hi guys,

I want a textarea where user type some comments and hit Enter, the comment is submitted without pressing Submit button.

I searched through the web and found something like the code below, but it does not seems to work. Can anyone point out my mistake?

Code:

$("commentForm").keypress(function(event) {
    if (event.which == 13) {
  alert("Submit!");
        event.preventDefault();
        $("commentForm").submit();
    }
});

This is my View (I left the submit button there, but if the OnEnter works, I will remove the button):

Code:

//Create a textarea for Comments
     $commentForm = array('id' => 'commentForm');
     echo form_open('comment/addComment/', $commentForm);
    
     $comment = array(
        'name'        => 'comment',
        'rows'  => '4',
        'cols'        => '30',
        'id'   => 'commentbox',
        'onkeypress' => 'submitComment()',
      );
     echo "<p>Your comment for this review:<br/>";
     echo form_textarea($comment);
     echo "</p>";

     echo "<p>";
     echo form_submit('submit', 'Post Comment');
     echo "</p>";
    
     echo form_hidden('reviewID', $row->reviewID);
     echo form_close();

[eluser]Aken[/eluser]
I think you're confusing it with two event listeners - one using jQuery, the other specified with the onkeypress attribute. Try removing the onkeypress attribute, and then verify your jQuery code is correct. You can do it with standard JS, too, if jQuery is complicating things. There's lots on Google about this, just search around (it technically has nothing to do with CI, anyway).

[eluser]Prullenbak[/eluser]
This is not really CodeIgniter related, but more a jquery thing...

You could try if this works:

Code:

$("#commentbox").keyup(function(event) {

    if (event.which == 13) {
        event.preventDefault();
        alert("Submit!");

        $("#commentForm").submit();
    }
});

Basically, you forgot the '#' signs to tell jQuery to look for an ID, and the keypress handler (which I changed to a keyup..I read somewhere that's better for several reasons...Don't know if that's true, but it also doesn't hurt ) should be assigned to the commentbox, instead of the commentForm id.

Also, make sure this code is in your documents ready() function, like this:

Code:

$(document).ready(function(){

//code from above in here.

});

[eluser]boltsabre[/eluser]
You don't need to put it inside the document ready tag

Code:

$(document).ready(function(){

//or this, which is the short hand version
$(function() {

If your jQuery code comes AFTER your html DOM nodes (aka your form). Basically if you put it down the bottom of your page it'll be fine.

But, why on earth do you even want this functionality? You do realise that you will be stopping users from entering line breaks into the textarea? If you don't want line breaks then you should be using a <input type="text" instead.

[eluser]Prullenbak[/eluser]
You're completely right, but since this is a CI forum, and not a jQuery forum, I didn't think it was necessary to tell all the ways in wich you can add bit of jQuery to a html page

Also your remark about the usability of this 'solution' is right. It's really not a good idea to do this

[eluser]Volkof[/eluser]
I understand the feedback of not recommending this method, but because facebook does this and my team members asked me to follow, so I had to do it.

So far I continued my search and pieced the info together with the code you guys have given me, and I got this:

Code:

function checkSubmit(e)
{
   if(e && e.keyCode == 13)
   {
      event.preventDefault();
        alert("Submit!");

        $("#commentForm").submit();
   }
}

I retained the onKeyPress in the textarea. The alert window did pop out.

Now the problem is I'm not sure how to pass the data from javascript to the Controller.
Basically I need 2 parameters (comment & reviewID) to be passed. My controller looks like this:

Code:

public function addComment()
{
  $comment = trim($this->input->post('comment'));
  $reviewID = $this->input->post('reviewID');
  
  if($comment != ''){
   //Get UserID from Session
   $userID = $this->members();  
   echo '<br/>Commenter = '.$userID;
   $this->comment_model->addComment($comment, $userID, $reviewID);
   echo 'Comment added!';
  }else{
   echo 'You didnt comment anything :(';
  }
  
}

Help will be appreciated. Thank you

[eluser]boltsabre[/eluser]

and my team members asked me to follow, so I had to do it.

Ah the powers that be! Tell them their idiots, that facebook "enter to submit" drives most users insane! Okay, don't tell them that their idiots, don't want to loose your job!

Firstly, is this a site that is 100% powered by javascript? Ie, if it's disabled all you see is a "please enable JS to use this site"?
If not, remember you'll still have to build the "standard" non-js submit form functionality. I'd get that up and going first.

Another couple of things

You're not doing ANY data cleansing of your review ID... people can change it to whatever they want using any number of browser plugins, you should:
1. Check that it is_numeric (at the very least)
2. Make a DB call (using active records so that it automatically escapes the data) and check at such a review does indeed exist
3. And if that all works, then proceed.
EDIT: Okay, on second thoughts, I cannot see your model, perhaps you're doing that check in there when your run the insert comment code. Either way, just make sure you've got some kind of check

Now the problem is I’m not sure how to pass the data from javascript to the Controller.

I'm a little confused... you're not actually submitting the form by JS yet... all you're current JS code does right now is submit the form (in the standard 'php' way) once the user presses enter.
You'll have to research "codeigniter and ajax" for this functionality.

Another thing, once you have your ajax up and going, you're doing your "did user enter anything" validation on the server, not sure if you have it in your view as well, but you should have this check on there as well if you're going to have ajax. Ajax calls are still a server hit, taking time, are prone to server connection issues, and adding extra load to your server. By doing this check client side first you're doing the right thing! (But you still want server side valiation for proper security.



Feel free to post back once you run into a specific problem.

[eluser]Prullenbak[/eluser]
Well, basically your jquery function submits the form with id 'commentForm'. And that form has the action 'comment/addComment/' (you might want to remove the trailing slash there, just to be sure). You don't actually pass data from javascript to the controller, you just submit a form. You can see if that's working by checking your address bar. Does it change to comment/addComment?

If so, you can continue working on that page/function, which handles the post data. You could try to start smaller, to see where the problem is (if there is one), and change your addComment function to this:

Code:

if($comment != ''){
  echo $comment;
  }else{
   echo 'You didnt comment anything :(';
  }

Just to see if the comment is actually submitted and available in your addComment function, and then work from there.

[eluser]Volkof[/eluser]
@boltsabre

Well yeah. I did create the submit button, which was way easier and it work. But then my team members want to follow the facebook way, so
Furthermore I have no knowledge of javascript, I am practically learning and working at the same time. Sorry if I posted so much questions.


@Prullenbak
Basically the alert did pop out when I press enter in the textarea, but after that just stayed at the same page (Nothing happen). The URL stays at the page it was. I reckon it has something to do with the $("#commentForm").submit();
because when I moved the alert after it, it didn't pop up.

[eluser]Prullenbak[/eluser]
Check the html source of the page that's displayed, to see of the id of the form is indeed "commentForm", check your browsers console to see why the $('#commentForm').submit(); doesn't work.
Also see if your submit button is also broken, or if this is just a jquery problem.

Unless there's something wrong with the html that your view displays or the submit button is broken as well, this is jQuery/javascript, and not at all related to CI.