CODEWITHSUNDEEP
jqueryforms
Ryan
Ryan

Reputation: 2234

Form submitting when pressing enter in Textarea

I've been trying various methods to get a form to submit when hitting the enter key. I know it works with an input field, but because this is going to be a comment, it needs to be a text area.

This is what I currently have for the form to submit with a button. 

$('.messageSubmit').live('click', function(){
    var name = $(this).siblings('.messageTextarea').val();
    var theid = $(this).attr('data-the_id');
    var dataString = name;

    $.ajax({
        dataType: 'json',
        url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?"+hash,
        type: "POST",
        data: "text="+dataString,
        success: function(data) {
            // finish load
            console.log(data, dataString, 'fail');
        },
        error: function(data) {
            var username = JSON.parse(localStorage.getItem('iguser'));
            var profilepic = JSON.parse(localStorage.getItem('iguserimg'));
            //console.log(data, dataString, 'succ');

            $('.box[data-the_id="' + theid + '"]').children('.postMessage').children('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>');

            $('.messageTextarea').val(''); // Remove comment from TextArea
        }
    });
    return false;
});

It works like it should. I want to remove the submit button and just have the form submit when a user hits the enter key. I know some people advise against this, but the users on this website will be used to hitting enter from Facebook and such.

I've tried methods such at this, but it none seem to work. 

$('.messageTextarea').keydown(function() {
    if (event.keyCode == 13) {
        this.form.submit();
        return false;
     }
});

Here is my form code

<form>
   <textarea class="messageTextarea" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;">Write your comment here...</textarea>
    <input type="submit" data-the_id="' + theid + '" name="submit" class="messageSubmit" id="submit_btn" value="Submit your comment">
 </form>

Any help would be great. Also, if anyone knows how to add an if function that will prevent the form from submitting with the current default value in the Textarea, that would be awesome. Currently, with how the textarea is set up now, if you just hit submit, it will submit Write your comment here...

Thanks

EDIT: Could a work around be... Having an button to submit, like normal, but have it hidden, and when you hit enter it triggers a call for that button? But then... I'd run into the same problem of enter doing nothing in the textarea except break into a new line...

Upvotes: 6

Views: 31689

Answers (3)

Anoop
Anoop

Reputation: 23208

try this jsfiddle

HTML:

<form>
   <textarea class="messageTextarea">Write your comment here...</textarea>

 </form>​

JS:

       $('.messageTextarea').keydown(function(event) {
    if (event.keyCode == 13) {
        $(this.form).submit()
        return false;
     }
}).focus(function(){
    if(this.value == "Write your comment here..."){
         this.value = "";
    }

}).blur(function(){
    if(this.value==""){
         this.value = "Write your comment here...";
    }
});

$("form").submit(function(){
       var name = $(this).siblings('.messageTextarea').val();
    var theid = $(this).attr('data-the_id');
    var dataString = name;

    $.ajax({
        dataType: 'json',
        url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?",
        type: "POST",
        data: "text="+dataString,
        success: function(data) {
            // finish load
            console.log(data, dataString, 'fail');
        },
        error: function(data) {
            var username = JSON.parse(localStorage.getItem('iguser'));
            var profilepic = JSON.parse(localStorage.getItem('iguserimg'));
            //console.log(data, dataString, 'succ');

            $('.box[data-the_id="' + theid + '"]').children('.postMessage').children('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>');

            $('.messageTextarea').val(''); // Remove comment from TextArea
        }
    });

    return false;
});
​
​

​

Upvotes: 12

Almir Sarajčić
Almir Sarajčić

Reputation: 1570

I think you would also want to give users ability to go to new line using shift.

$('.messageTextarea').on('keyup', function(e) {
    if (e.which == 13 && ! e.shiftKey) {
        // your AJAX call
    }
});

See this: http://jsfiddle.net/almirsarajcic/Gd8PQ/

It worked for me.

Also, you need to remove that submit button you currently have.

Upvotes: 27

bukart
bukart

Reputation: 4906

try it this way

<form method="post" action="">
    <textarea></textarea>
</form>

<script type="text/javascript" src="./lib/js/jquery/jquery-1.8.1.min.js"></script>

<script type="text/javascript">
    jQuery('textarea').keydown(function(event) {
        if (event.keyCode == 13) {

            this.form.submit();
            return false;
         }
    });
</script>

I tested it, and it worked

I added only the parameter event to the function header

Upvotes: 3

Related Questions