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/
Related
I would like run function on my form submit (validate with Foundation framework) :
$($newsletter).on('formvalid.zf.abide', function(ev) {
ev.preventDefault();
alert('validate!');
openRevealNewsletter(this.getAttribute('action'));
});
I've my alert when my form is valid, but my preventDefault() don't work. My form is submitted :(
first of all easy way to make this work done is use
<button type="button">submit</button>
instead of
<button type="submit">submit</button>
to submit the form programmatically in java script use
document.getElementById("FormID").submit();
this will submit your form when you call this script also prevent default will not required once you replace submit with button in submit button
Intercept submit with submit event.
$($newsletter).on("submit",function(e) {
e.preventDefault();
console.log("submit intercepted");
return false;
});
$($newsletter).on("forminvalid.zf.abide", function(e,target) {
console.log("form is invalid");
//show error messages
});
$($newsletter).on("formvalid.zf.abide", function(e,target) {
console.log("form is valid");
//process form
openRevealNewsletter(this.getAttribute('action'));
});
Please try this:
$($newsletter).on('formvalid.zf.abide', function(ev) {
alert('validate!');
openRevealNewsletter(this.getAttribute('action'));
return false;
});
This will stop the form post on a false returned value.
When you are using return false,automatically it is doing 3 separate things when you call it:
1.event.preventDefault();
2.event.stopPropagation();
3.Stops callback execution and it returns immediately when callback are called.
I am having an input type submit button. I am calling the bootstrap dialog box as follow but it is not functioning as expected. It will not reenable the preventdefault to go to the httppost action as specific by the form
What am I intend to do?
When user click on the button, it will not trigger form submission but instead trigger the bootstrap dialog box. If user confirm the dialog box, it will redirect to httppost form submission to delete the item. If user cancel the confirmation, it will remain in same page.
What am I avoiding to do in this case?
retrigger the form submission httppost url using ajax call or any other method in the confirmation. I do not want to use $.ajax to trigger form submission again.
$('.classname').on('click touchstart', function(e) {
e.preventDefault();
BootstrapDialog.confirm('Hi Apple, are you sure?', function(result) {
if(result) {
alert('Yup.');
$('.classname').unbind('click touchstart');
} else {
alert('Nope.');
}
});
});
You could submit the FORM manually:
$('.classname').on('click touchstart', function(e) {
e.preventDefault();
BootstrapDialog.confirm('Hi Apple, are you sure?', function(result) {
if(result) {
alert('Yup.');
//submit the FORM
$(this).closest('form').submit(); // or whatever to target specific FORM
// you could have to call the native submit method instead
// then use: $(this).closest('form')[0].submit();
// an other solution could be:
// $(this).off('click touchstart').click();
} else {
alert('Nope.');
}
});
});
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;
}
});
Currently I have a submit button that pops up a confirmation that allows the form data to be processed or not.
I need my other button on my form page called "Cancel" to have the same action. How could I expand this code to add a second confirmation to the same form?
these are my buttons on the form :
And this is my current code that works :
</script>
<script>
$(document).on('submit', "#signinform", function(e)
{
if (!confirm("By clicking 'OK' you will be placed in queue! Please take a seat."))
{
e.preventDefault();
return;
}
});
</script>
just to add on :
The submit is a submit BUTTON. the Cancel is just a href with a border around it.
also again
This works at the moment for just the submit button.
I need my other button on the form called "Cancel" to do the samething, as in if you hit Ok your submission data will be deleted, and then you will be returned back to the form. If you hit cancel then you will remain on the page.
I guess you simply need something like
$(document).on('click', "#cancelButtonID", function(e)
{
if (!confirm("By clicking 'OK' you cancel the submission and the form is cleared."))
{
e.preventDefault();
return;
}
else {
//Clear the form or perform whatever actions are needed
}
});
I think however that you may want to replace your cancel link with a proper <input type="reset"> button, as that will clear the form automatically when you let the default action happen. Then you should be able to get rid of the else section above.
I have a web page which I have prevented the default action on all submit buttons, however I would like to re-enable default submit action on a button how can I do this?
I am currently preventing the default action using the following:
$("form").bind("submit", function(e){
e.preventDefault();
});
I have successfully done this using the following:
$(document).ready(function(){
$("form:not('#press')").bind("submit", function(e){
e.preventDefault();
});
But can I do this dynamically when the button is clicked?
You would have to unbind the event and either rebind to a separate event that does not preventDefault or just call the default event yourself later in the method after unbinding.
There is no magical event.cancelled=false;
As requested
$('form').submit( function(ev){
ev.preventDefault();
//later you decide you want to submit
$(this).unbind('submit').submit()
});
Either you do what redsquare proposes with this code:
function preventDefault(e) {
e.preventDefault();
}
$("form").bind("submit", preventDefault);
// later, now switching back
$("form#foo").unbind("submit", preventDefault);
Or you assign a form attribute whenever submission is allowed. Something like this:
function preventDefault(e) {
if (event.currentTarget.allowDefault) {
return;
}
e.preventDefault();
}
$("form").bind("submit", preventDefault);
// later, now allowing submissions on the form
$("form#foo").get(0).allowDefault = true;
function(e){ e.preventDefault();
and its opposite
function(e){ return true; }
cheers!
$('form').submit( function(e){
e.preventDefault();
//later you decide you want to submit
$(this).trigger('submit'); or $(this).trigger('anyEvent');
With async actions (timers, ajax) you can override the property isDefaultPrevented like this:
$('a').click(function(evt){
e.preventDefault();
// in async handler (ajax/timer) do these actions:
setTimeout(function(){
// override prevented flag to prevent jquery from discarding event
evt.isDefaultPrevented = function(){ return false; }
// retrigger with the exactly same event data
$(this).trigger(evt);
}, 1000);
}
This is most complete way of retriggering the event with the exactly same data.
I had a similar problem recently. I had a form and PHP function that to be run once the form is submitted. However, I needed to run a javascript first.
// This variable is used in order to determine if we already did our js fun
var window.alreadyClicked = "NO"
$("form:not('#press')").bind("submit", function(e){
// Check if we already run js part
if(window.alreadyClicked == "NO"){
// Prevent page refresh
e.preventDefault();
// Change variable value so next time we submit the form the js wont run
window.alreadyClicked = "YES"
// Here is your actual js you need to run before doing the php part
xxxxxxxxxx
// Submit the form again but since we changed the value of our variable js wont be run and page can reload (and php can do whatever you told it to)
$("form:not('#press')").submit()
}
});
You can re-activate the actions by adding
this.delegateEvents(); // Re-activates the events for all the buttons
If you add it to the render function of a backbone js view, then you can use event.preventDefault() as required.