Bootbox.js在提交表单之前确认选择

Question

你好我已经决定使用Bootbox.js作为一个简单的方法来合并一个引导模式，以便我可以让用户在表单发布和更改之前确认他们的选择。

我使用Laravel，jQuery的，引导和Bootbox.js在我的默认布局文件：

Layout.blade.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"></script>')</script> 
    <script src="js/plugins.js"></script> 
    <script src="js/main.js"></script> 
    <script src="js/vendor/bootstrap.js"></script> 
    <script src="js/vendor/modernizr-2.6.2.min.js"></script> 
    <script src="js/vendor/bootbox.js"></script> 

用户页面：

{{Form::open('choice')}} 

    @foreach($items as $item) 
     <tr> 
     <td>{{ HTML::image($item->image, '', array('class' => 'img img-rounded', 'width' => '100px', 'height' => '100px')) }}</td> 
     <td>{{$item->name}}</td> 
     <td>{{ $item->desc }}</td> 
     <td>{{ Form::radio('item', $item->item_id)}}</tr> 
    @endforeach 
    </tbody> 
    </table> 

    {{ Form::submit('Confirm Choice', array('class' => 'btn btn-success btn-block')) }} 

    <script> 
    $(document).ready(function() { 
    $(document).on("click", ".alert", function(e) { 
     bootbox.confirm("Are you happy with the decision you have made?", "I have changed my mind", "I am happy with my choice", function(result) { 
     if (result) { 
      console.log("user confirmed"); 
     } else { 
      console.log("user declined"); 
     } 
     }); 
    }); 
    }); 
</script> 

{{Form::close()}} 

我做不知道如何使模态出现在前面并阻止提交。但是，只有在用户确认了他们的选择后才会发布。

Answer 1

在onClick处理程序中添加e.preventDefault（）将阻止表单提交。

<script> 
    $(document).ready(function() { 
    $(document).on("click", ".alert", function(e) { 
     e.preventDefault(); 
     bootbox.confirm("Are you happy with the decision you have made?", "I have changed my mind", "I am happy with my choice", function(result) { 
     if (result) { 
      console.log("user confirmed"); 
     } else { 
      console.log("user declined"); 
     } 
     }); 
    }); 
    }); 
</script>