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>

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

1 个答案: