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.');
}
});
});
Related
I'm using Bootbox.js to show a confirmation box prior to submitting a form. The form has two submit buttons that handle two different actions. I was successful in showing the dialog and submitting the form, however the value of the button that was clicked is not included in the request. This is obvious, because by submitting the form manually no buttons were clicked. As I need to have a working form with and without javascript, I can't use hidden fields with a value changed at runtime by javascript. I then tried triggering the click event on the button itself when I leave the popup dialog, however I don't know how I could understand which button was originally clicked. Also, the click will probably trigger another submit event causing an infinite loop. How can I prevent that?
<form name="myform" action="myaction" method="post">
...
<button type="submit" name="decline" value="decline">Decline</button>
<button type="submit" name="accept" value="accept">Accept</button>
</form>
$(document).ready(function() {
$('form[name="myform"]').submit(function(e) {
bootbox.confirm({
message: '...',
callback: function(result) {
if (result) {
$('button[name="accept"]').click();
}
}
});
e.preventDefault();
}
});
An (admittedly brute-force) method of making your current script work is to create a sentinel variable that you toggle on the submission of your form:
$(function() {
var firstClick = true;
$('form[name="myform"]').submit(function(e) {
if(firstClick === true){
firstClick = false;
bootbox.confirm({
message: '...',
callback: function(result) {
if (result) {
$('button[name="accept"]').click();
}
}
});
e.preventDefault();
}
}
});
This lets you handle the form submission the first time the submit event is triggered, with subsequent submit events being allowed to submit the page.
It's also worth nothing (per the HTML spec) that
A button (and its value) is only included in the form submission if the button itself was used to initiate the form submission.
So your two buttons (Accept and Decline) could share the same name attribute, with only the button that was clicked reporting it's value.
I'm using a bootstrap validator from (https://github.com/1000hz/bootstrap-validator/blob/master/js/validator.js) and I'm trying to instantly display a modal 'loading' box when the submit button is pressed on a form. I've achieved this by doing the following:
$('form').on('submit', function (event) {
showLoadingModal();
if (!event.isDefaultPrevented()) {
event.preventDefault();
submitForm(this);
} else {
hideLoadingModal();
}
});
However I'm getting a problem where there is a small gap of time (under a second) between clicking the button and the modal being displayed. I'm assuming this delay is caused by the time taken validating all the fields on the form of which there are quite a lot.
This therefore leads me to believe that the validator 'form submit' is being executed before my code and I should be doing something different to call the showLoadingModal()
Edit:
I've added some logging into the js to work out what happens and when. I've also moved the showLoadingModal() into a 'button clicked' event to ensure it happens before form submit. Here's the order my messages get displayed:
button clicked
before show modal
after show modal
form submitted
about to validate
<--Modal appears now-->
set a delay of 300ms before submitting your form
var event;
var formobj;
('form').on('submit', function (event) {
showLoadingModal();
event = event; //save event to be used later
formobj = this;
setTimeout(function()
{
if (!event.isDefaultPrevented()) {
event.preventDefault();
submitForm(formobj );
} else {
hideLoadingModal();
}
},300);
return false; //Prevent normal submission of the form so that the dialog box is visible
});
I am assuming submitForm(this) is the function that does the form posting causing the page to reload
Just a thought, hope it helps!
Consider the following script. After validating the script, if they changed their email, I wish to display a dialog prompting them for their password. The server will then only update the database if the password checks out.
The problem is it results in an endless loop since the dialog button submits the form which in turn initiates the dialog. I realize I could just not trigger the dialog if $('#password') is not empty, however, my actual script is more complicated, and it would be "nice" to somehow submit the form and bypass the jQuery validation submitHandler.
Is this possible? If so, how?
var validator=$("#main_form").validate({
rules: {},
messages: {},
submitHandler: function(form) {
if(emailedChanged) {
$("#dialog-password").dialog("open");
}
else {form.submit();}
}
});
$('#dialog-password').dialog({
buttons : [
{
text : 'SAVE',
click : function() {
$('#password').val($(this).find('input').val());
$('#main_form').submit();
}
},
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
});
You could capture the click event and prevent it from submitting the form (thus preventing submitHandler from triggering). Then in the handler of the click event, you could add the desired functionality.
Check if the email's been changed, if so, show the dialog which in turn will submit the form if the save button is clicked.
If the email hasn't been changed, just trigger the submit event of the form.
$("#hj").click(function (ev) {
ev.preventDefault();
if (emailedChanged) {
$("#dialog-password").dialog("open");
} else {
$("#main_form").submit();
}
});
fiddle
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/
Okay so with jQuery I've intercepted the .submit() of a form and I want to create a custom pop up window that shows them the data that the entered and asks them to confirm it. If they click the confirm button true is returned to .submit() and they continue but if false is pressed then they should not move on and have a chance to change their entry.
I already have the pop up window being made fine with the contents of the form being displayed and the buttons being shown. What I'm not sure how to do is bind the click functions of the buttons so that if one is clicked it returns false to .submit() and if the other is clicked true is returned to .submit()
If you need me to post some of my code just let me know.
I don't want to use a confirm dialogue since i would like it to be a custom pop up window.
You need to use a confirm() dialogue:
var submit = confirm('Are you sure?');
if (submit) {
$(this).submit();
}
else {
return false;
}
This works by the dialogue presenting the message "Are you sure?" to the user, if the user clicks on the confirmation ok button, the dialogue returns true to the variable submit, otherwise it returns false.
If false is returned (the user clicked cancel), then the if evaluates to false, and the else is executed.
You would need to pass the .submit() as a callback function to the dialogue. This isn't a one line solution but rather a pattern that you should get familiar with. This http://www.youtube.com/watch?v=hQVTIJBZook will probably be helpful for some of this topic along with other common issues that you may come across
Example:
function openPopup(form) {
//
// Put whatever code you use to open you
// popup here
//
// Bind click handler to submit form if they click confim
$("#id_of_confim_button").on("click", function() {
// Get the form that was
form.submit();
});
// Bind click handler for cancel button
$("#id_of_cancel_button").on("click", function() {
//
// Code to close your popup
//
});
};
$("#id_of_form_submit_button").on("click", function(event) {
// Stops the form from submitting
event.preventDefault();
// Get the form you want to submit
var form = $("#form_being_submit");
// Call your 'open custom popup' function and pass
// the form that should be submitted as an argument
openPopup(form);
});
Catching only this form's submits' click event won't handle all cases (f.ex. if someone hits enter on a non-textarea input, the form submits too).
If i want to handle submit in an asynchronous way, i used to fire manually submit after the original was prevented & bring in an isDirty state:
(function () {
var isDirty = true;
$("form#id").on("submit", function ( evt ) {
if (isDirty) {
evt.preventDefault();
popup( "... params ...", function () {
// this will called, when the popup ensures the form can be submitted
// ... & it will be called by the popup
isDirty = false;
$("form#id").submit();
} );
}
});
})();