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;
}
});
Related
I am using following form and submit button in my dynamic html page.
<form method=\"post\" class=\"my-form\" >
and
<input type=\"submit\" name=\"submitButton\" value=\"Submit\" id=\"button1\" />
What I am trying to do is when a particular input is provided by user, then display an alert box asking if user wants to submit the change or just stay on the same page without submitting the change.
I can display the alert box (with help from stackoverflow members) but along with window.alert what I should add to JavaScript so the form is not submitted if user clicks "cancel" on window.confirm and the form is submitted if user clicks "ok" on window.confirm?
JavaScript example is at fiddle
$(document).on('input', '.my-input', function(){
$(this).closest('form').addClass('changed');
});
$(document).on('submit', '.my-form', function(e){
if($(this).hasClass('changed')){
var x=window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
if (x)
window.alert("Thresholds changed!")
else
window.alert("Thresholds not changed!")
}
$(this).removeClass('changed');
e.preventDefault();
});
You just need to change your logic so that preventDefault() is only called when the user declines the confirm box. Try this:
$(document).on('submit', '.my-form', function (e) {
if ($(this).hasClass('changed')) {
var allowSubmit = window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
if (!allowSubmit)
e.preventDefault()
}
});
Example fiddle
If you click 'OK' you'll see that the form is submit (and a warning from jsFiddle to use a POST request - but that's normal), whereas clicking 'Cancel' does nothing.
You can also return false in your submit function handler, it should work. Check this question for an example.
I am submitting a form with AJAX:
$("#frmConferenceSettings").on("submit",function(event){
// disable default click operation
event.preventDefault();
// run the AJAX submit
update_conference_settings();
});
This works fine, however the effect is such that only the submit button will work to submit the form; hitting enter whilst in a form input is disabled by event.preventDefault().
If event.preventDefault() is removed the form submits when the user is in an input field and hits enter, but the AJAX via update_conference_settings() is lost.
How can I allow the form to be submitted by hitting enter, whilst preserving the AJAX?
You could only call event.preventDefault() if it's a certain type (i.e. click) event.
You can try to bind a keypress event and trigger() the handler on your button.
Didn't try it but it should work.
UPDATE replace bind with on
$(document).on('keypress', function(e){
if(e.which === 13) { // enter
$('#button_id').trigger('click');
}
});
You could remove the event.preventDefault() and put 'return false' after update_conference_settings().
Edit: this is how this should work:
$(function(){
$("#my-form").submit(function(){
update_conference_settings(function(){
//Here you can redirect to new page or do nothing
//window.location.href = "/submit-page"
console.log("3) update_conference_settings complete");
});
console.log("2) Default form submit cancelled");
return false;
});
function update_conference_settings(callback)
{
//Simulate ajax latency
console.log("1) Init ajax call");
setTimeout(function(){
callback();
}, 250);
}
});
See this in action here:
http://jsfiddle.net/6mNhX/6/
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.
Quick question: How do i check if a submit button is clicked in a function.
explained question:
ok, so I have a validate script for my sign-up page. The validate function is run onblur of every input (after the submit button has been clicked first).
However, the validate script not only gives the inputs a red background if the correct information hasn't been entered, but it also displays an alert message.
My problem is: I only want to display the alert message if the submit button is clicked, otherwise i just want to do change the background color. So how do I check if a submit buttons is clicked, in a function.
I could just have two different functions, one to be run for all the inputs. and one to be run for the submit button.
Register the submit event to your form to validate before it is submitted.
Added: You should register the function in document ready event.
$(function(){
$("#myformid").submit(function()
{ if(!highlightNshowError())//your function to validate the form, return false if validation failed
return false; //stop submitting the form
else
return true;
});
});
or simply
$(function(){
$("#myformid").submit(function()
{
return highlightNshowError();
});
});
I'm using anchors to submit forms:
$("a[title=submit]").click( function(){
$(this).parents("form").submit();
});
It works very well, however I still want the user to be able to submit the form when pressing enter or return.
Anyone know how to do this?
$("form").bind("keypress", function(e){
if(e.keyCode == 13){
$(this).submit();
}
});
You should be able to do that by default. If you have an onsubmit for the form make sure it returns true, otherwise returning false will prevent the form from submitting normally.
Unless your submit function is doing something funky it shouldn't block the user from submitting by pressing enter inside a field.