I have a html form with no submit button. I want to submit that form upon hitting ENTER button. I used a simple jquery code to submit the form upon hitting ENTER.
$("form :input").keypress(function(e)
{
if(e.keyCode == 13)
{
$(this).parents('form').submit();
}
});
But there is a problem with this code. When i type in text field and want to select a suggestion (these are the suggestions, suggested by browser based on the history for that field) for that field using "ENTER" key it trigger the submit of the current form. I want to skip this as well.
Is there something like in jquery or javascript
$("form :input").keypress(function(e)
{
if(e.keyCode == 13)
{
if(! $(this).is('suggestOpened')) // i want something like this
{
// submit the form
}
}
});
Thanks in advance.
No, there's no such event. You could play with onchange and onblur events to intercept whether the user is filling a particular field, but anyway without a submit button:
There's no way for the user to figure-out how to submit the form
The same action (enter key press) could lead to two different actions, which breaks UI consistency
IMHO you should definitely place a submit button.
Related
I try to make a confirm popup that going to jump when user click on a button of form.
If the user click on ok in the popup, the form goting to submit.
Its must to be dynamic becuse i have a lot of forms in one page and all form must to get the confirm popup.
I replaced the submit button with a normal button and when the user click on the button the confirm jumping.
<input type='button' name='submitButton' onclick="openPopup(this);">
Its work amazing but when the user into a text input and press on eneter its not submit the form.
What can i do?
Use following JS:
<input type='submit' name='submitButton' onclick="openPopup(this);">
If you can't use a submit button in your form you just need to handle this in the keydown event in your form inputs to check if Enter key is pressed and click your button dynamically:
$("#formID").find('input[type=text]').on('keydown', function (e) {
if (e.keyCode == 13) {
$('[name="submitButton"]').click();
}
});
Note:
I used formID as id of your form you just need to replace it with your form id.
$(document).ready(function() {
$('input').keypress(function(data) {
if (data.keyCode == 13)
data.target.form.submitButton.click();
});
});
When you accept confirmation then fire this event
$('[name="submitButton"]').click();
When a form is submitted with a button click or by pressing enter, the submit button is included in the posted fields. However if the form is submitted with jquery($('#some_form').submit();), the submit button isn't included. If a click event is triggered on the button, it's included in the posted fields.
Is this behavior normal? Is there a way to include the button in the submitted fields by using the submit method?
**EDIT: ** As #Pointy stated in the comments:
An "Enter" from an input field can cause a submit; the rules for that are somewhat complicated. Usually it has to do with how many input fields there are (like, just one, or more than one).
So apparently not every time when enter is pressed the form is submitted, but I couldn't find any info about it. Could someone post a link, or explain these rules about what triggers the form submission and which form fields are included?
You could do something like this: https://jsfiddle.net/6smh74s9/2/
Javascript
$('form').on('submit', function(e) {
e.preventDefault();
var data = [];
$(this).find(':input').each(function () {
if (this.name) {
data.push({ name: this.name, value: this.value });
}
});
$('div').html($.param(data));
});
I have a form field that I'd like to munge a little before the user submits the form.
Specifically, it's a location field, and I need to check whether they've added the state abbreviation. If not, I add it.
I'm watching for blur() so i can see when the user's tabbed or clicked out of the field:
$('#views-exposed-form-libraries-map-page-1 .form-item-field-geofield-distance-origin input').blur(function(){
// do stuff
});
`
This works fine when the user clicks the submit button or tabs out of the input.
However when the user hits "enter" or "return" to submit the form, the function doesn't run - I'm guessing because there's no blur event.
Is there some other way to snag the input's value and edit it when the user hits "enter" or "return"?
You can create a .submit() that trigger .blur() on focused element like that :
$('form').submit(function(){
$(':focus').trigger('blur');
})
set a .submit callback as well/instead, this will be called before the actual form submits and you can cancel the submission if needed
$("#myForm").submit(function(e){
//check/do stuff here before submit
//use e.preventDefault() or return false to stop submission if needed.
});
JQuery .submit Doc
$(window).keydown(function(event){
if(event.keyCode == 13) {
$(':focus').trigger('blur');
event.preventDefault();
return false;
}
});
I have a form that I use JQuery, I don't think I need to put code in this post, the question is pretty basic.
But I would like to block the form from submitting when people press the Enter Key or the Return Key.
At the same time, I have textareas, where the user will need to be able to press the Enter / Return keys.
A quick and nasty hack but generally more reliable than trying to block keypresses in every field: add:
<input type="submit" onclick="return false;" />
at the top of the form. The first submit in a form acts as a default button for when Enter is pressed in current browsers, so by neutering it you prevent an Enter-submission from occurring.
Then use CSS to hide and/or move the button so it can't be seen.
It isn't always a good idea to block Enter-submissions though; it's the standard way the browser is expected to work and some users really do want it.
set a flag at the document level, submitform = false;
validate submissions against this.
change the flag in the onclick handler of the submit button.
Couldn't you add an onsubmit attribute to the form, then check if it was submitted using the enter key?
You could try this
jQuery(document).ready(function(){
validSubmit = false;
})
jQuery('myForm textarea').keypress(function(e) {
if (e.which == 13) {
validSubmit = true; // if the pressed key is enter, then allow submissions
}
})
jQuery('myForm').submit(function(){
if (!validSubmit) {
return false; //if submitting the form is not allowed, then cancel submission
}
})
This cancels all submissions whatsoever unless the enter/return key is pressed on a textarea. If you are using a button, you need to add a function to that too.
jQuery('form button.validSubmit').click(function(){ //or 'form input[type="submit"]'
validSubmission = true;
})
I have 25 components which includes [textarea, textfile, radio, combo, etc...] and I have written a key event so that when "ENTER" is entered, I call a function which will submit the page.
Now my page is getting submitted when I press enter, even in the textarea which should not be. So is there any way that I can not submit the page if it is pressed in the text area?
This happens only in IE7 and IE8; it works properly in all the other browser.
you could probably detect if any of the textarea, etc is not filled out/emtpy/unset. if all of them are filled out properly, send the form.
Did you attach the "key event" to the whole form? The whole DOM? if you did that's a normal behavior.
If you want the "Enter key" to submit the page when the focus is on the submit button then apply this functionality in the onsubmit event - there of course you can perform all the validation you need.
If you just want to exclude the enter key event from the text area - perform a simple check if the the focus is in the textarea that momemnt.
The default behaviour of a form is to submit if the user hits enter inside the form unless the focus is on a textarea, so what you want is the default behaviour. Remove whatever code you have that currently handles keypresses for the form and you'll have what you want.
I'm not sure if this will suit your needs, but you can disable the enter key inside the textarea with something like this:
$(document).ready(function(){
$('textarea').keypress(function(e){
var key = (window.event) ? e.keyCode : e.which;
if ( key == 13 ) {
return false;
} else {
return true;
}
})
})