使用Bootstrap模态框确认操作。

Question

我有一个表单，希望提交，但一旦用户点击提交按钮，它将显示一个Twitter Bootstrap模态框，该模态框可以让表单继续处理或取消返回到表单页面。是否可能将常规的 JavaScript 确认转换为 Bootstrap 模态框？

<form action="http://localhost.testing/modal-processing.php" class="form-horizontal" role="form" method="GET">
    <label>Landlord<span class="mandatory">*</span></label>
    <select class="form-control input-sm chosen chzn-select" tabindex="1" data-placeholder="Choose a landlord" data-rule-required="true" name="landlord_id" id="landlord_id">
        <option value=""></option>
        <option value="31" >Liam Lawlor</option>
        <option value="34" >Damian Lavelle</option>
        <option value="35" >Mick Lally</option>
        <option value="36" >Joanne Lavelle</option>
        <option value="37" >Liam Lacey</option>
        <option value="38" >Laura Luney</option>
        <option value="39" >Lenihan Enterprises</option>
    </select>

    <!-- modal caller -->
    <a href="#modal-dialog" class="modal-toggle" data-toggle="modal" data-href="http://localhost.testing/modal-processing.php" data-modal-type="confirm" data-modal-title="Delete Property" data-modal-text="Are you sure you want to delete {$property.address_string}?" data-modal-confirm-url="{$base_url}residential-lettings/properties/do-delete/property/{$property.id}"><i class="icon-trash"></i> Modal Submit</a>

    <!-- proper submit -->
    <input type="submit">
</form>

- Pierce McGeough

Answer 1

您可以通过在 Bootstrap 模态框中启用一个链接/按钮（例如：'btnYes'），作为确认框，用于触发通过 jQuery 提交表单...

$('#btnYes').click(function() {
    // handle form processing here  
    $('form').submit(); 
});

这是一个可工作的演示：http://bootply.com/88094

- Zim

---

非常奇怪。$('form')返回一个数组，所以$('form')[0].submit()可以工作。这也可以：$('#myForm').trigger('submit')。但是，唉，你的答案对我不起作用。 - Pop-A-Stash

Answer 2

为模态按钮添加点击监听器是正确的：

$('#myModalButton').click(function(){
  //submit form
  // $('#myForm').submit(); // not working for me
  // $('#myForm')[0].submit(); //works, but is ugly
  $('#myForm').trigger('submit');  //works great
});

据我所知，$('form')返回一个数组。即使是$('form#myForm')也会返回一个数组。

因此，

$('form')[0].submit();

应该可以工作。

$('#myForm').trigger('submit');

这是我能让它工作的唯一方法。

- Pop-A-Stash