Использование Jquery Validator и Sweetalert для поля подтверждения отправки формы - PullRequest
Новая
       12

Использование Jquery Validator и Sweetalert для поля подтверждения отправки формы

0 голосов
/ 11 ноября 2018

Я пытаюсь сделать следующее.

У меня есть 3 кнопки: «Продолжить», «Удалить», «Новый». Все это кнопки типа «отправить».

Когда форма публикуется, значение этих кнопок используется для определения того, что происходит на сервере.

Я хочу, чтобы всплывающее окно Sweetalert подтвердило, хочет ли пользователь удалить, а затем, когда нажата кнопка ОК, форма должна перейти и передать бэкенду.

Проблема, с которой я столкнулся в настоящее время, заключается в том, что невозможно получить значение кнопки отправки на стороне сервера, когда я включаю Sweetalert, чтобы показать, когда я нажимаю кнопку отправки.

Сценарий A) Например, если я удаляю «e.preventDefault» из обратного вызова, предупреждение появляется на короткое время, но форма отправляется, не давая пользователю подтвердить или отменить удаление. Это неправильное поведение, но значение кнопки «отправить» действительно публикуется на сервере. Поэтому, чтобы предотвратить проблему быстрого всплывающего окна, я добавляю «e.preventDefault», чтобы остановить нормальное поведение кнопки «Отправить».

Сценарий B) Однако, когда у меня есть код, указанный ниже (т. Е. К коду добавлено «e.preventDefault»), форма не отправляется после проверки. Вместо этого я должен запустить "$ ('# myForm'). Submit ()". Но когда я это делаю, значение кнопки «отправить» не публикуется на сервере.

Если кто-то может мне помочь, как я могу использовать jQuery Validate и Sweetalert, это будет очень ценно.

Пример установки выглядит следующим образом:

HTML: 

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>


<form id="myForm" action="/postHere" method="post">        
   <!-- Options-->
 <div class="row-select"> 
   <label for="options">My Options</label> 
    <select name="options" id="options">
      <option disabled="true" selected="selected">Select an Option</option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
 </div>

  <!-- continue details form -->
  <div>
    <input type="submit" id="continue" name="submitButton" value="Continue this Option">            
  </div> 

  <!-- delete details -->
  <div>          
    <input class="delete" type="submit" id="delete" name="submitButton" value="Delete this Option">                      
  </div>

  <!-- new -->  
  <div class="row-spaced">        
    <input type="submit" id="submitButton" name="submitButton" value="Neither" formnovalidate>        
  </div>
</form>

Javascript: 

function myFunction() {
  var continueOption = document.getElementById('continue');
  var deleteOption = document.getElementById('delete');
  var neither = document.getElementById('new');

  $('#myForm').validate({
    ignore:'',
    rules: {
      options: "required"
    },

  });

  // AIM IS TO SHOW A CONFIRMATION BOX IF DELETE IS CLICKED
  if(deleteOption) {
    deleteOption.addEventListener("click", function(e) {
        e.preventDefault();
      swal({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this imaginary file!",
        buttons: true,
        dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {
            console.log("here");
          $('#myForm').submit();
        }
      }); 
    });  
  }  
}

myFunction();

Backend Иллюстрация: 

router.post("/postHERE", (req, res) => {
    if (req.body.submitButton == "Continue this Option") {
        // Do something CONTINUE
    }
    else if (req.body.submitButton == "Delete this Option") {
        // Do something DELETE
    }
    else {
       // Do something NEW
    }

}

JSFiddle:

Пример JSFiddle

EDIT:

Для бэкэнда я использую Expressjs. Я добавил это и исправил тип в методе формы для публикации.

...