Question

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

我有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();

后端图示：

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：

https://binkley.blogspot.com/2006/08/javadoc-generic-type-parameters.html

编辑：

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

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

0 个答案: