Question

我有一个html表单，用户用一个整数填充输入。

<input id="helpBlock" type="number" min="0" step="1" class="form-control" name="quantity" required>

我想要做的是当用户提交表单时，将输入与数字进行比较，如果满足条件，则在提交继续之前显示并要求确认的弹出窗口。

$('form').on('submit', function(e) {
  e.preventDefault();
  var quantity = $('#helpBlock').val(); // Read the user input
  var quantityW9 = 100; //the number to compare

  if (quantity > quantityW9) {
    console.log("quantity is bigger -> " + quantity);
    //Here show a confirmation window in order to continue

  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" class="form-horizontal" role="form">

      <div class="has-warning">
        <label for="inputWarning1" class="col-md-1 control-label">Quantity</label>
        <div class="col-md-2">
          <input id="helpBlock" type="number" min="0" step="1" class="form-control" name="quantity" required>
        </div>
      </div>

      <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
          <button type="submit" name="formAction" class="btn btn-success">Submit</button>

        </div>
      </div>

    </form>
  </div>
</div>

Answer 1

见下面的摘录。

$('form').on('submit', function(e) {
  e.preventDefault();
  var quantity = $('#helpBlock').val(); // Read the user input
  var quantityW9 = 100; //the number to compare
var result = confirm("you want to continue");
console.log(result);
if(result){
if (quantity > quantityW9) {
    console.log("quantity is bigger -> " + quantity);
    
    //Here show a confirmation window in order to continue

  }
  
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" class="form-horizontal" role="form">

      <div class="has-warning">
        <label for="inputWarning1" class="col-md-1 control-label">Quantity</label>
        <div class="col-md-2">
          <input id="helpBlock" type="number" min="0" step="1" class="form-control" name="quantity" required>
        </div>
      </div>

      <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
          <button type="submit" name="formAction" class="btn btn-success">Submit</button>

        </div>
      </div>

    </form>
  </div>
</div>

Answer 2

现在只有条件（整数比较）为 true 时才会弹出确认窗口。我们也会在确认窗口中做出决定：确定或取消，以便我们相应地处理每个案例：

var can_submit = false;
$('form').on('submit', function(e) {
  if(can_submit){
  /*---START: ONLY FOR DEMONSTRATION PURPOSE---*/
  e.preventDefault();
  console.log("submitted now!");
  /*---END: ONLY FOR DEMONSTRATION PURPOSE---*/
  } else {
  e.preventDefault();
  var quantity = $('#helpBlock').val(); // Read the user input
  var quantityW9 = 100; //the number to compare

if (quantity > quantityW9) {
    console.log("quantity is bigger -> " + quantity);
    
    var confirmation = confirm("Do you want to continue");
    if(confirmation){
        console.log("Clicked OK - submitting now ...");
        can_submit = true;
        $('form').submit();
    } else {
        console.log("Clicked Cancel");
        can_submit = false;
    }
  }
  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" class="form-horizontal" role="form">

      <div class="has-warning">
        <label for="inputWarning1" class="col-md-1 control-label">Quantity</label>
        <div class="col-md-2">
          <input id="helpBlock" type="number" min="0" step="1" class="form-control" name="quantity" required>
        </div>
      </div>

      <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
          <button type="submit" name="formAction" class="btn btn-success">Submit</button>

        </div>
      </div>

    </form>
  </div>
</div>

如何在提交按钮单击时显示弹出窗口

2 个答案: