通过Bootstrap模态框提交确认

Question

我希望有一个提交模态确认框，但是我没有正确地做到这一点。

以下是我的JS代码：

function warning(){

      $('#ModalSubmitCart').modal('show');
      var yes = document.getElementById('confirm').value;

      if (yes == 'yes') {
      return true; 
      } 
      else {
      return false;
      } 
}

我的模态框的一部分：

<div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button type="submit" class="btn btn-primary" id="confirm" value="yes">Yes</button>
</div>

我的表单

<form onSubmit="return warning()" method="POST" action="submitcart.php">

我希望有一个类似于confirm()的模态框形式。

- Aaron Alfonso

---

给我一个 Fiddle，我会帮你的。 - ashfaq.p

Answer 1

bootstrap modal 没有直接的回调函数。

我做了一点小hack。

我所做的：

• 在模态框上的两个按钮中添加一个类。
• 为按钮附加点击回调处理程序，并通过按钮的text验证是否为close按钮或yes按钮。

JS代码：

$(function () {
  $('#show').on('click', function () {
    console.log('clicked');
    warning();
  });

  $('.buttons').on('click', function () {
    var yes = $(this).text();
    if (yes === 'Yes') {
        console.log('yes');
        //return true;
    } else {
        console.log('close');
        //return false;
    }
 });
});

function warning() {
   $('#ModalSubmitCart').modal('show', function (data) {
      console.log('data:' + data);
   });
}

JSFiddle上的实时演示：http://jsfiddle.net/dreamweiver/wccqyzej/

- dreamweiver

---

嗨。感谢您。但是...我该如何提交表单？ - Aaron Alfonso

没事了，我搞定了。非常感谢你。$("#form_order").submit();. - Aaron Alfonso

很高兴能帮到你，愉快编程 :) - dreamweiver

Answer 2

你可以将模态框包裹在一个 FORM 中，并使用提交按钮，就像你正在做的那样。

<form action="/echo/html/" method="POST" name="modalForm" id="modalForm">
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content panel-warning">
        <div class="modal-header panel-heading">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</form>

使用jQuery截取submit事件。

$('#modalForm').on('submit', function(e){
    if (!confirm('are you sure?'))
    {
        e.preventDefault();
        return false;
    }
});

你可以在这个fiddle中看到它是如何工作的。

- LeftyX

Answer 3

我认为你应该这样使用你的jQuery代码

function warning(){

    $('#ModalSubmitCart').modal('show');
    var yes = $('#confirm').attr("value");

    if (yes == 'yes') {
        return true; 
    } 
    else {
        return false;
    } 
}

- omprakash yadav