Disable submit a form in html when press Enter key - javascript

I have an HTML form with several text fields. So, I want to move cursor from a text field to next text field when I press the enter key, but the form should not be submitted. How can I do this? If there is a code example it may more helpful to me.

press the tab key on your keyboard instead of enter.

I'm using this function to do what you ask for:
$(document).on("keypress", ".TabOnEnter" , function(e)
{
if( e.keyCode == 13 )
{
var nextElement = $('[tabindex="' + (this.tabIndex+1) + '"]');
console.log( this , nextElement );
if(nextElement.length )
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
Use the 'TabOnEnte' class on the fields you want this class to apply on.
Also to prevent user from submittin with enter key:
if (e.which == 13) {
e.preventDefault();
}

i got the answer. it should put in the input tag which we want.
onkeydown='if ((event.keyCode == 13 && document.getElementById("field_0").value!="") && event.which == 13){
document.getElementById("field_1").focus();
event.preventDefault();
}'

Related

Detect Tab Key event on textbox on focus

I have a autocomplete textbox in a form and I want to detect whether user has focussed on the textbox from navigating through tab key press.I mean tabindex has been set up on different form fields and user can navigate fields by pressing tabs.Now I want to perform some action when user directly mouse click/foxus on the textbox and some other action when user has focussed on the textbox through tab.
Below is the code I was trying.But no matter everytime code is 0.
$('#tbprofession').on('focus', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('Tabbed');
}
else
{
alert('Not tabbed');
}
});
This code does not work.
Note:Before marking duplicate it will be good if you understand the question correctly.Else I can make it more clear with more elaborated description.
Anyone can show me some light?
You can try something like that :
$(document).on("keyup", function(e) {
if ($('#tbprofession').is(":focus")) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('I was tabbed!');
} else {
alert('not tabbed');
}
}
});
fiddle : https://jsfiddle.net/xc847mrp/
You can use keyup event instead:
$('#tbprofession').on('keyup', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
console.log('I was tabbed!', code);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autofocus>
<input id='tbprofession'>
You could have an array of key events triggered anytime a user presses a key while on your page. Although this makes you think of a keylogger.
Or just keep the last key.
Or a boolean saying if the last key pressed was a TAB or not.
And on focus you can look at that variable.

I can't clear a form with .reset()

I'm trying to make a form where the user inputs items onto a text box and when they hit "enter" it puts the text into a list. However I also want to clear what they'd put into the form right after they hit enter (sorta like skype). here's my jquery code.
$('#inputpnote').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
var $pnote = document.getElementById("inputpnote").value;
if ($pnote.length > 0) {
$("#pnotes-list").append("<div class='pnote-list'><li>" + $pnote + "</li></div>");
$pnote.reset();
}
}
});
#inputpnote is the text form and #pnotes-list is where I'm putting the text they'd typed.
help would be appreciated thanks!
If #inputpnote isn't the form ID, but a field ID, maybe you'll need to use val:
$('#inputpnote').val('');

jQuery - get the index of <input> throwing a keypress event

I'm trying to get the index of an input between a set of inputs. Basically, I have a table that contains, on more than one row, many inputs.
Once the user press the "enter" button, while the input is focused, I need to jump to the next input field, as the "tab" key do.
I was following this accepted response, and this is what I've done so far: Fiddle
CODE
$(document).keypress(function(e){
if( e.which == 13 && e.target.nodeName == 'INPUT'){
var inputs = $("#inputsTable input.td_in");
alert(inputs.index(this));
}
});
as you can see, every time you focus an input and then press ENTER, the popup msg says "-1"..
What am I doing wrong? I've been struggling with this piece of code for an hour, and I'm giving up.
I found out that replacing this with e.target also works.
CODE
$(document).keypress(function(e){
if( e.which == 13 && e.target.nodeName == 'INPUT'){
var inputs = $("#inputsTable input.td_in");
alert(inputs.index(e.target));
}
});
That's because this references the document, not your input.
Use .on(), and pass it an input.td_in selector:
$('#inputsTable').on('keypress', 'input.td_in', function (e) {
if( e.which == 13 ) {
var inputs = $("#inputsTable input.td_in");
alert(inputs.index(this));
}
});
P.S. You should probably cache that selector.
$(document).on('keypress', 'input', function (e) {
if( e.which == 13 ){
var inputs = $("#inputsTable input");
var the_index = inputs.index(this);
inputs[the_index+1].focus();
}
});
http://jsfiddle.net/5DwHw/1/

Use Enter Key to move to inputs

Is it possible to use the enter key to move to the next input field in a form? I also want to use the tab, but the enter key would be nice too.
FYI - I do have several textareas and I need to use the enter key for returns when they type. Will this be a conflict?
Thank you.
Erik
If you were to add a class called 'TabOnEnter' to the fields where you want to cycle on enter.
$(document).on("keypress", ".TabOnEnter" , function(e)
{
//Only do something when the user presses enter
if( e.keyCode == 13 )
{
var nextElement = $('[tabindex="' + (this.tabIndex+1) + '"]');
console.log( this , nextElement );
if(nextElement.length )
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut(); })
Not as cute as the previous answer, but it works now :
http://jsfiddle.net/konijn_gmail_com/WvHKA/
This way you use a standard HTML feature ( tabindex ) to determine the cycling order. Hidden elements should have their tabindex removed.
Shot in the dark (assuming your textareas are lined up):
$(".myTextareas").keypress(function(e) {
if(e.which == 13) {
$(this).next('.myTextareas').focus();
}
});

Form submit on keyCode == "enter" (13)

I need to submit the content of a form when I press the Enter key, but only if the form has no error message. I built up the following function:
$(targetFormID).submit(function (e) {
var mess = error_m(targetDiv);
if (e.keyCode == 13 && mess.length > 0) {
e.preventDefault();
e.stopPropagation();
}
if (mess.length == 0 && e.keyCode == 13) $(targetFormID).submit();
});
In this function the mess variable is getting the error message returned by function error_m, the rest is simple code condtion but it doesn't work.
Need some help with this!!
Submitting the form when the Enter key is pressed is default browser behaviour. Don't mess with it. Just validate the form in the submit event.
$(targetFormID).submit(function (e) {
var mess = error_m(targetDiv);
if (mess.length > 0) {
e.preventDefault();
}
});
One other possible problem: what is targetFormID? If it's actually a string containing an element ID, you'll need
$("#" + targetFormID).submit(/* Same function as above */);
If it's a reference to the form element then $(targetFormID) is fine but your variable is misleadingly named.

Categories