how to submit the form using ENTER key - javascript

I am trying to design a cluster layout with input field and submit button..everything works fine when i type the text and click enter button..but i want to use the ENTER key for this purpose...
i mean ONE ACTION IN TWO BUTTON(ENTER key and SUBMIT button)
below is what i have tried
$(document).ready(function(){
$('editor').bind('keydown',function(event){
var keyCode= (event.keyCode ? event.keyCode :
(event.which ? event.which : event.charCode));
if(keyCode==13){
document.getElementById('update').click();
return false;
}else{
return true;
}
});
});
for the above code,no action on keypress and no error in the console
this is my entire code - https://pastebin.com/NbwEJQGX
Can anyone suggest me some way to solve this issue???

$("input").keyup(function(e){
if(e.which == 13){
$("#form").submit();
}
});

$("input").keypress(function(event) {
if (event.which == 13) {
//do stuff
}
});
See this code for button clicks
$( "button" ).click(function() {
//do stuff for button click
});

I would suggest to add a class respective input field. then capture the event by the class as you may have multiple field where you want to submit the form after giving some value.
<input type="text" class="entr"/>
<input type="text" class="entr"/>
$('.entr').keypress(function(e){
if (e.keyCode == 13) {
$('#editorForm').submit();
}
});

This should work
$(document).ready(function(){
$(document).keypress(function(e) {
if(e.which == 13) {
$( /* Your form here */).submit();
return false;
}
});
$(/* Where to click */).click(function(){
$( /* Your form here */).submit();
return false;
});
});

You can also call the function in the input
<input id="example" type="text" onkeypress="functionName(event, 0)" />
<input id="example" type="button" onclick="functionName(event, 1)" />
function functionName(e, n) {
if (e.keyCode == 13 || n == 1) {
//do stuff
}
}

Related

How to set event listenet for 'Enter' key in textarea with js [duplicate]

This is meant to allow a user to type in a message and then press enter to send it. This should clear the box so that the user can type in a new message. The problem is that the standard result of pressing enter (creation of a newline) is occurring after the .empty() event....so the text vanishes and is replaced by a newline, which is quite undesirable. How can I circumvent this?
$('#messagebox').keypress(function(event) {
if (event.keyCode == '13') {
send();
$('#messagebox').empty();
}
});
You can prevent the default action of the keypress via event.preventDefault() (or return false from your event handler function, which is jQuery shorthand for preventDefault + stopPropagation):
Live example | source:
HTML:
<p>Pressing Enter will clear the text area below:</p>
<textarea id="messagebox" rows="10" cols="50"></textarea>
JavaScript:
jQuery(function($) {
$("#messagebox").focus().keypress(function(event) {
if (event.keyCode === 13) {
$(this).val("");
event.preventDefault();
}
});
});
FWIW, I'd probably use val with an empty string rather than empty to clear the textarea, since val is specifically for setting the value of form fields — but if empty() is working for you...
$('#messagebox').keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
send();
$(this).empty();
}
});
demo
$('#messagebox').on('keydown',function(e) {
if (e.which === 13) {
send();
$(this).val('');
e.preventDefault();
}
});

in textbox how when when I press ENTER submit the Form and when I press shift+ENTER insert new line

how in textbox when when I press Enter submit the Form and when I press Shift+Enter insert new line like facebook comments and posts
might have a solution for your submit on Enter
Assuming you're using jquery :
$('your-input-selector').keypress(function(event) {
if (event.keyCode == 13) {
$('form').submit();
}
});
Javascript :
The HTML input
<input type="text" onkeypress="myKeyPressHandler(event)">
Javascript function
function myKeyPressHandler(event) {
if (event.keyCode == 13) {
document.getElementById("myForm").submit();
}
}
Edit 1
Here your solution for the Shift+Enter combination:
Jquery:
$('your-selector').keyup(function (e) {
if (e.which === 13 && e.shiftKey) {
alert('shift enter pressed');
//Do your work here
}
});
Non-Jquery :
<input type="text" onkeyup="myKeyUpHandler(event)">
Javascript function:
function myKeyUpHandler(e) {
if (e.which === 13 && e.shiftKey) {
alert('shift enter pressed');
//Do your work here
}
}

how do I call function when the user presses enter on the input

I want call function when the user presses enter on the input.
<input type='text' id='name'></input>
I found this code but it doesn't work.
$("#name").bind('keypress', function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
Did you include the JQuery library? Your code appears to work fine in Chrome.
You could also do:
$("#name").keypress(function(e) {
if(e.keyCode == 13) {
alert('You pressed enter!');
}
});
JSFiddle: http://jsfiddle.net/dMt55/
Non Jquery version:
document.getElementById('name').onkeypress = function(e) {
if(e.keyCode == 13) {
alert('You pressed enter!');
}
}
Please try this;
<input type='text' id='name' />
$("#name").bind('keypress', function(event) {
if (event.keyCode== 13) { //Enter
// your code
}
});
You can wire up your own custom event
.Try this
HTML
<input type='text' id='name'></input>
Jquery
$('#name').bind("enterKey",function(e){
//do stuff here
});
$('#name').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
http://jsfiddle.net/x7HVQ/

Disable enter submit

I have a form with a textfield inside and I am trying to disable the default behavior when the browser submits the whole form if the user presses Enter while the textfield is selected.
$('#recaptcha_response_field').keydown(function(event) { if (event.keyCode == 13) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
alert("You Press ENTER key");
return false;
}
});
Currently am getting "You Press ENTER key" and the default behavior isn't overridden.
Try this:
$(document).on("keypress", 'form', function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
This will prevent the form submit on keypress
DEMO HERE
I found this and it works for me.
<input type="text" name="somename" id="someid" value="" onkeypress="return event.keyCode!=13">
To prevent the script from blocking the enter key on other elements such as on a textarea. Change the target from "form" to "input".
$(document).on("keypress", "input", function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
If none of the above solution is working for you , and you are using javascript anyway , why don't you use button type as 'button' <input type='button'> and submit it using javascript
$('#form_id').submit();
U can use this script to prevent enter on entire from.
<script type="text/javascript">
$(document).on("keypress", 'form', function (e) {
if (e.target.className.indexOf("allowEnter") == -1) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
}
});
</script>
you put the classname to which control need to use enter

Stopping enter key submitting also stops enter key in multi line text edit

There are lots of solutions on the web for stopping the enter key from submitting a form. Most commonly to use <body onkeypress = ...
But these seem to have the undesired side effect of stopping the enter key working in a multi-line text box. Does anyone know of a way around this, so the enter key will still work in a multi-line text box?
Thanks,
AJ
<script language="Javascript">
document.onkeydown = function() {
if (event.keyCode == 13) {
if (document.activeElement.tagName.toLowerCase () != "textarea") {
event.preventDefault();
return false;
}
}
}
</script>
Something like this?
You can try the following (with jquery):
$(function(){
$('input:not(textarea)').live('keypress', function(e) {
if (e.which == 13) return false;
if (e.which == 13) e.preventDefault();
});
});
Only input fields are targeted, not textareas.
NON JQUERY
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode;
else
key = e.which;
return (key != 13);
}
And add onKeyPress on all text inputs
<input type="text" name="textIn" onKeyPress="return disableEnterKey(event)"/>
Ref : http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

Categories