Mulgard Mulgard - 6 months ago 34
jQuery Question

Custom Confirmation Dialog with PHP, jQuery and Bootstrap

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

Answer

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).

Comments