javascript - 停止表单提交，然后从模式框触发

Question

我有一个表单，当我尝试发送时显示确认模式，我可以对警报窗口执行相同的操作，但出于美观原因，我显示一个带有按钮的模式，该按钮确认发送表格

我想要模式按钮来触发表单，我如何使用 jquery 来做到这一点

我的代码:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" 
aria-labelledby="myLargeModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-body">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" 
data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" 
id="myModalLabel">Confirmar compra</h4>
                                </div>
                                <div class="modal-body">
                                    <p>Praesent commodo cursus magna, vel 
scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet 
rutrum faucibus dolor auctor.</p>
                                    <p>Aenean lacinia bibendum nulla sed 
consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur 
et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
                                    <p>
                                        <a href="" class="button button-3d 
notopmargin fleft" id="comprar" >Proceder a la compra</a>
                                    </p>
                                    <p>&nbsp;</p>



                                </div>
                            </div>
                        </div>
                    </div>
                </div>   

<form method="POST" action="proceso.php" accept-charset="UTF-8" 
id="procesar"><input name="_token" type="hidden" 
value="Lj6ETkI7zq0lLWcu4nX2pGHh3kQeX6RpuazUIzHY">

<div class="col_half">


    <label for="billing-form-name">Nombre</label>
    <input class="sm-form-control" name="addressline" type="text">

</div>

<div class="col_half col_last">
    <label for="billing-form-lname">Apellido</label>
    <input class="sm-form-control" name="billing-form-lname" type="text" 
    id="billing-form-lname">

</div>

<div class="form-group">
    <label for="ruc">RUC / CI</label>
    <input class="form-control" name="ruc" type="text" id="ruc">
</div>


<input class="button success" id="proc_cart" data-toggle="modal" data-
target=".bs-example-modal-lg" type="submit" value="Procesar pedido">
</form>

和我的js

 var custom2=jQuery;
 custom2.noConflict();

 custom2(document).ready(function() {

    custom2( "#proc_cart" ).click( function(event){
        event.preventDefault();

    });

    custom2( "#comprar" ).click( function(event){

        $("#procesar").trigger('submit');

    });
});

Answer 1

如果未满足要求，您将阻止默认停止表单提交。

$('#form1').on('submit', function(e) {
    if(
      $('#checkbox').prop('checked') == false 
    ) {
      $('.popup').show();
      e.preventDefault();
    } else {
      console.log('submitted');
    }
});

.popup {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" placeholder="name"/>
  <div class="popup">
  <label for="confirm">Confirm</label>
  <input type="checkbox" id="checkbox" name="confirm"/>
  </div>
  <input type="submit">
</form>