Develop Reference

Confirm form submit with two buttons in BootboxJS

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.

Instantly display a modal when the form is submitted (before validation)

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!

jquery reenable prevent default after prevent default

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.');
}
});
});

Two button confirmations - Jquery

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.

return true or false based on button clicked in pop up window

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();
} );
}
});
})();