Пользовательский диалог подтверждения с PHP, jQuery и Bootstrap
Я использую Bootstrap создать модальное диалоговое окно подтверждения:
<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>
Я хочу, чтобы этот модальный диалог появился после того, как я нажму кнопку отправки. Я не хочу, чтобы отображалось стандартное диалоговое окно подтверждения браузера (потому что оно ужасно).
Я знаю, как я могу показать это диалоговое окно, используя jQuery
$(document).ready(function () {
$("#push_form").submit(function () {
$("#push_confirmation").modal('show');
});
});
Но что я не знаю, так это как заставить этот модальный диалог использоваться в качестве диалогового окна подтверждения моей формы:
<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>
Две кнопки в моем диалоговом окне начальной загрузки должны точно делать то же, что и кнопки в «нормальном» диалоговом окне подтверждения, и только если пользователь нажимает положительную кнопку, мой пост должен быть выполнен.
Как я могу это сделать?
РЕДАКТИРОВАТЬ
Думаю, немного неясно, что я имею в виду под «нормальным диалогом подтверждения», извините, я не знаю, как мне его назвать. Я имею в виду то, что описано Вот
Решение
Шаг 1: замените кнопку отправки вашей формы на общую кнопку
До:
<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>
После:
<button type="button" class="btn btn-default" id="btnFormSubmit"><?php echo $language_array[LV_PUSH_INPUT_SEND]; ?></button>
Шаг 2. В модальном диалоге добавьте идентификатор к кнопке «Да», чтобы связать обработчик кликов следующим образом:
<button id="btnModalSubmit" type="button" class="btn btn-default" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_YES]; ?></button>
Шаг 3: связать обработчики кликов с кнопками
$(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;
});
});
Вам может потребоваться обновить код PHP в зависимости от того, как вы проверяете, была ли отправлена форма, поскольку кнопка отправки больше не присутствует (например, $_POST[REQUEST_SEND_GCM] более не существует).
Другие решения
Попытайся..
Ваши кнопки на модале ..
<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>
Твой сценарий ..
$(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();
}
})
});