Replacing Plain Javascript with better looking BootBox Dialog in PHP Form with "submit" post button
marcoczen opened this issue · comments
Hi,
Currently in my PHP / HTML / BootStrap form I have a functional plain Javascript Confirmation Dialogs ( Proceed ? - Yes / No ) as follows;
:: JS Code ::
function actionConfirm(msg1) {
if (confirm(msg1)) {
return true;
} else {
return false;
}
}
//end of actionConfirm
const elems = document.getElementsByClassName('confirmProceed');
Array.prototype.forEach.call(elems, (elem) => {
elem.addEventListener('click', (event) => {
if ( !actionConfirm('Proceed with Action?') ){
event.preventDefault();
}
});
}); // end Array.prototype.forEach
My php form is submitted by a button of type 'submit' and the javascript function by
a class 'confirmProceed' as shown below:
:: PHP Form snippet ::
<button type="submit" class="btn_custom confirmProceed"
name="button_delete" value="delete"
title="Delete Item" >Delete</button>
Any idea how i can use BootBox Dialog in the above code to provide better looking
Confirmation Dialogs without removing the button of type 'submit' ?
As we note here, http://bootboxjs.com/documentation.html#bb-note-nonblocking, you'd have to rework how your form is handled. Bootstrap modals are just positioned <div> elements, and the code is asynchronous; unlike the native confirm, bootbox.confirm() doesn't block the executing thread, so you'd have to manually submit the form within the callback option.
Hi @tiesont
As we note here, http://bootboxjs.com/documentation.html#bb-note-nonblocking, you'd have to rework how your form is handled.
From the link above ( for the next noob ) ...
Dialog code does not block code execution
All Bootstrap modals (and therefore Bootbox modals), unlike native alerts, confirms,
or prompts, are asynchronous; meaning, the events which Bootstrap generates are
non-blocking events. Because of this limitation, code that should not be evaluated
until a user has dismissed your dialog must be called within the callback
function of the dialog.
Noted . Thanks.
Therefore, I cannot submit the form via button of type 'submit' but must use a form 'id' to submit ? Or is there another better method?
Also is it impossible to use any other Jquery Modal dialog for what i am trying to do ?
They will all have the same problem as BootBox ?
Is my understanding correct ?
That is not a "real" problem - that is how native confirm works and libraries like BootBox cannot change that behaviour, it's your job to do that within that callback function. So basically do not submit your form if you like to do some confirmation - just open that BootBox confirm dialog and if user is ok with that then manually submit your form within that callback function.
So basically do not submit your form if you like to do some confirmation - just open that BootBox
confirm dialog and if user is ok with that then manually submit your form within that callback function.
So;
bootbox.confirm({
size: "small",
title: "Proceed Form Submission?",
callback: function(result){
if ( result === null) {
event.preventDefault();
// or is it just preventDefault()
// or confirm.preventDefault()
// we must do this or else the form will be submitted ?
} else {
submitMyForm();
}
});
Thank you for yr patience.
$("#testform").submit(function(e) {
const form = this;
e.preventDefault();
bootbox.confirm("Do you want to submit?!", function(result) {
if (result) form.submit();
});
return false;
})
@jstark518
Thanks... Will try ...Sorry for delay .....