Geek Answers Handbook

Submission form when you press enter in Textarea

I am trying to use various methods to get a form to submit when I press enter. I know that it works with an input field, but since it will be a comment, it should be a text area.

This is what I currently have for submitting a form using 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 as it should. I want to remove the submit button and just submit the form when the user presses the enter key. I know some people advise against this, but users on this website will be used to log in to Facebook, etc.

I tried such methods, but it doesn't 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 being submitted with the current default value in Textarea, that would be awesome. Currently, with the way textarea is configured now, if you just click submit, it will post your comment here ...

thanks

EDIT: Can the work work ... Having a button to send, as usual, but hidden, and when you press the enter button, does it call this button? But then ... I faced the same input problem, I do nothing in the text box, except to break into a new line ...

+6
source share
3 answers

try 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; });​​

+12
source

I think you will also want to give users the option to jump to a 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.

In addition, you need to remove this submit button that you currently have.

+26
source

try it like this

 <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 event parameter to the function header

+3
source

More articles:


All Articles