javascript - 使用 Jquery Validator 和 Sweetalert 进行表单提交确认框

Question

我正在尝试执行以下操作。

我有 3 个按钮，“继续”、“删除”、“新建”。所有这些都是键入“提交”按钮。

发布表单时，这些按钮的值用于确定后端发生的情况。

我想要一个 Sweetalert 弹出窗口来确认用户是否要删除，然后当点击 OK 按钮时，表单应该继续并提交到后端。

我目前遇到的问题是，当我合并 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();

后端插图：

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
    }

}

JSF中：

JSFiddle 示例

编辑：

对于后端，我使用的是 Expressjs。我已将其添加并修复了要发布的表单方法中的类型。

标签： javascriptjqueryjquery-validatesweetalert