Custom Confirmation Dialog with PHP, jQuery and Bootstrap

Question

Im using Bootstrap to create a modal confirmation dialog:

<script>
    jQuery("#push_confirmation").modal({show: false});
</script>

<div class="modal fade" id="push_confirmation" tabindex="-1" role="dialog" aria-labelledby="myModal5Label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col text-center modal_image_failed">
                            <img src="<?php echo SYSTEM_TEMPLATES; ?>images/ic_warning_black.svg" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center modal_title">
                            <?php echo $language_array[LV_PUSH_CONFIRMATION_TITLE]; ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center modal_title_sub">
                            <?php echo sprintf($language_array[LV_PUSH_CONFIRMATION_DESC], "INSERT TITLE HERE"); ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center modal_footer_buttons">
                            <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_YES]; ?></button>
                            <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_CANCEL]; ?></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I want this modal dialog to show up after i press a submit button. I do not want the standard browser confirmation dialog to show up (because it is ugly).

I know how i can show up this dialog using jQuery

$(document).ready(function () {
    $("#push_form").submit(function () {
        $("#push_confirmation").modal('show');
    });
});

But what i do not know is how i can force this modal dialog to be used as the confirmation dialog of my formular:

    <form id="push_form" action="system/web/push.php" method="post">
        <div class="row">
            <div class="col card_input_push card_input_push_language">
                <select name="<?php echo PARAM_PUSH_LANGUAGE; ?>">
                    <?php echo get_languages($mysqli); ?>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col card_input card_input_push">
                <input type="text" name="<?php echo PARAM_PUSH_TITLE; ?>" placeholder="<?php echo $language_array[LV_PUSH_INPUT_TITLE]; ?>"<?php echo set_value(PARAM_PUSH_TITLE); ?>required/>
            </div>
        </div>
        <div class="row">
            <div class="col card_input_push card_input_push_message">
                <textarea name="<?php echo PARAM_PUSH_MESSAGE; ?>" placeholder="<?php echo $language_array[LV_PUSH_INPUT_MESSAGE]; ?>"<?php echo set_value(PARAM_PUSH_MESSAGE); ?>required></textarea>
            </div>
        </div>
        <div class="row">
            <div class="col text-center card_input_push card_button_push_send">
                <button class="btn btn-default" type="submit" name="<?php echo REQUEST_SEND_GCM; ?>" value="<?php echo $language_array[LV_PUSH_INPUT_SEND]; ?>"><?php echo $language_array[LV_PUSH_INPUT_SEND]; ?></button>
            </div>
        </div>
    </form>

The two buttons of my bootstrap dialog should exactly do what the buttons in the "normal" confirmation dialog are doing and only if the user presses the positive button my post should be performed.

How can i do that?

EDIT

I guess it is a little bit unclear what i mean by "normal confirmation dialog", sorry, i dont know how i should call it. What i mean is what's described here

What do you mean by "normal confirmation dialog" ? I've never seen a standard (read: browser) dialog when I submitted a form ever. (Apart from the 'remember this password?' question) — ccKep, Jun 03 '16 at 14:26
you can call the "normal confirmation dialog" like described here: `http://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box` — Mulgard, Jun 03 '16 at 14:28
Ah, you mean the JS `confirm` function. I thought you wanted to suppress any browser-dependent dialog that's already popping up somehow. Regarding your question: I'll post an answer, since that's too long for a comment anyway. — ccKep, Jun 03 '16 at 14:30

score 3 · Accepted Answer · answered Jun 03 '16 at 14:48

Step 1: Replace the submit button of your form with a generic button

Before:

<button class="btn btn-default" type="submit" name="<?php echo REQUEST_SEND_GCM; ?>" value="<?php echo $language_array[LV_PUSH_INPUT_SEND]; ?>"><?php echo $language_array[LV_PUSH_INPUT_SEND]; ?></button>

After:

<button type="button" class="btn btn-default" id="btnFormSubmit"><?php echo $language_array[LV_PUSH_INPUT_SEND]; ?></button>

Step 2: In your modal dialog, add an id to your "Yes" button to associate a click handler next:

<button id="btnModalSubmit" type="button" class="btn btn-default" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_YES]; ?></button>

Step 3: Associate the click handlers to the buttons

$(document).ready(function () {
    // Button in the form just shows the dialog
    $("#btnFormSubmit").click(function(event)
    {
        $("#push_confirmation").modal('show');

        event.preventDefault();
        return false;
    });

    // Button in the dialog calls submit on the form
    $("#btnModalSubmit").click(function(event)
    {
        $("#push_form").submit();

        event.preventDefault();
        return false;
    });
});

You might need to update your PHP code depending on how you check if the form was submitted since the submit button is no longer present (eg. $_POST[REQUEST_SEND_GCM] no longer exists).

Thank you very much. This is perfect! – Mulgard Jun 03 '16 at 14:57 — Mulgard, Jun 03 '16 at 14:57

Parvez Rahaman · Answer 2 · 2016-06-03T14:43:36.177

1

Try it..

Your buttons on modal..

<button type="button" data-value="confirm" class="btn btn-default confirm_action" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_YES]; ?></button>
<button type="button" data-value="cancel" class="btn btn-default confirm_action" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_CANCEL]; ?></button>

Your script..

$(document).ready(function () {

    $("#push_form").submit(function (e) {
        e.preventDefault();
        $("#push_confirmation").modal('show');
    });
    $('.confirm_action').on('click', function(){
        if($(this).data('value') == 'confirm'){
            $('#push_form').submit();
        }
    })
});

edited Jun 03 '16 at 14:43

answered Jun 03 '16 at 14:33

Parvez Rahaman

4,269
3
22
39

Wouldn't that `.confirm_action` click handler invoke the `#push_form` submit handler above, hence displaying the confirm dialog (even though it was already showing)? Also: You're not preventing the form from being POSTed while showing the modal? – ccKep Jun 03 '16 at 14:41
Wouldn't that *always* cancel the form from being submitted? I recon .submit() calls the submit handler, which prevents further execution? – ccKep Jun 03 '16 at 14:46

Custom Confirmation Dialog with PHP, jQuery and Bootstrap

2 Answers2