Подтверждение отправки формы с SweetAlert2 - PullRequest
Новая
       19

Подтверждение отправки формы с SweetAlert2

1 голос
/ 20 марта 2019

Я работаю над проектом, который требует подтверждения перед отправкой формы, для этого я использую SweetAlert2, но он никак не работает. Я пытался с кодом из других потоков, но у меня та же проблема, страница загружается, и когда я отправляю форму, она ничего не делает (ну, она отправляет информацию без проверок или вопросов). Он работает уже как бета-версия без SweetAlert.

Форма HTML выглядит примерно так: 

´<form class="form-register col-8" method="post" action="insert.php" enctype="multipart/form-data">
<select name="subjects"> 
  <option disabled="disabled">Select</option>
  <--!Here I have PHP code to list things from DB -->
</select>
<input id="m" type="text"/>
<select name="tempo">
  <option disabled="disabled">Select<option> <!--Regular options list-->
<select>
<input id="c" type="text"/>
<input type="submit" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/>
</form>´

Мой функциональный скрипт без SweetAlert: 

$(document).ready(function(){
$(".form-register").submit(function(){
 if ($("#m").val().length<9){
  alertify.warning('Incomplete ID');
  return false;
 }
 if ($("#m").val().length>9){
  alertify.warning('Error');
  return false;
 }
 if ($("#c").val().length>200){
  alertify.warning('Write less comments please');
  return false;
 }
 else
 {
    var Con= confirm("Click ok if you are sure");
    if(Con == true)
    {
      return true;
    }
    {
      return false;
    }
 }
});

});

Примечание: я использую SweetAlert2 8.X от jsdelivr. Я попытался отделить этот скрипт в функции и включить его в остальное (работает на 50%, даже если я выйду из первых двух $ функций): 

$(document).ready(function(){
$('.form-register').submit(function (e){
  e.preventDefault();
  const swalWithBootstrapButtons = Swal.mixin({
    customClass: {
      confirmButton: 'btn btn-success',
      cancelButton: 'btn btn-danger'
    },
    buttonsStyling: false,
  })
  swalWithBootstrapButtons.fire({
    title: 'Are you  sure?',
    text: "Check plz",
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    reverseButtons: true
  }).then((result) => {
    if (result.value) {
      swalWithBootstrapButtons.fire(
        'Finished',
        'Success',
        'success',
      ), function(submit){
        form.submit();
        }
    } else if (
      result.dismiss === Swal.DismissReason.cancel
    ) {
      swalWithBootstrapButtons.fire(
        'Canceled',
        'Do corrections and then retry :)',
        'error'
      )
    }
  })
});

});

Я попытался заменить тип отправки во вводе кнопкой и другими селекторами в заголовке скрипта. Единственное, что мне нужно, это подтверждение, чтобы продолжить вставку данных в insert.php, и если пользователь отменит, верните другое сообщение об ошибке, если это возможно ... заранее спасибо.

1 Ответ

0 голосов
/ 20 марта 2019

Изменение: 

<input type="submit" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/>

На: 

<input type="button" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/>

Затем в вашем JS прослушайте нажатие на "# btn-ok", а затем просто программно отправьте форму, используя$ form.submit ().Смотрите ниже: 

$(document).ready(function() {
    $('form #btn-ok').click(function(e) {
        let $form = $(this).closest('form');

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false,
        })

        swalWithBootstrapButtons.fire({
            title: 'Are you  sure?',
            text: "Check plz",
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (result.value) {
                swalWithBootstrapButtons.fire(
                        'Finished',
                        'Success',
                        'success',
                    );                     
                $form.submit();
            } else if (
                result.dismiss === Swal.DismissReason.cancel
            ) {
                swalWithBootstrapButtons.fire(
                    'Canceled',
                    'Do corrections and then retry :)',
                    'error'
                );
            }
        });

    });
...