表单和引导模式(Forms and Bootstrap modal)
我有这个表单允许你选择或添加一个选项到下拉字段,问题是当你单击添加选项,它调用模式,但它也提交整个表单,但我在输入字段上放了一个必需的标记因此除非完成,否则不会真正通过该表格
这里是表格:
<div class="col-lg-12"> <form action="<?php echo base_url(); ?>products/purchase" role="form" accept-charset="utf-8" method="post"> <div class="form-group"> <div class="col-lg-12"> <label class="control-label">Name</label> <input type="text" name="name" class="form-control inline" required> </div> </div> <div class="form-group"> <div class="col-lg-10"> <label class="control-label">Class</label> <div class="input-group"> <select name="class_ID" class="form-control" required> <option value="">Select Class</option> <?php if(!empty($cls)){ if (is_array($cls)){ foreach ($cls as $row) {?> <option value="<?php echo $row['class_id']?>"><?php echo $row['class_Name']; ?></option> <?php } } } else{ ?> <option value=""></option> <?php }?> </select> <span class="input-group-btn"> <button class="btn btn-theme" data-toggle="modal" data-target="#addClass"><i class="fa fa-plus"></i></button> </span> </div> </div> </div> <div class="form-group"> <div class="col-lg-12 pull-right"> <input type="submit" class="btn btn-success pull-right" value="Order" style="margin-left:5px;"> </form> <a href="<?php echo base_url()?>purchases" class="btn btn-default pull-right">Back</a> </div> </div> </div>莫达尔:
<div class="modal fade" id="addClass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Add New Product Classification</h4> </div> <div class="modal-body"> <form action="<?php echo base_url(); ?>products/add_class" method="post" accept-charset="utf-8" role="form"> <div class="form-group"> <div class="col-lg-6"> <label for="class_Name">Classification Name</label> <input type="text" name="class_Name" class="form-control"> </div> </div> <div class="form-group"> <div class="col-lg-3"> <label for="is_active">Enabled</label> <select name="is_active" class="form-control"> <option value="1">Yes</option> <option value="0">No</option> </select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <input type="submit" class="btn btn-success" value="ADD"> </form> </div> </div> </div> </div> </div>I have this form that lets you choose or add an option to a dropdown field, the problem is when you click the add option, it calls down the modal but it also submits the whole form, but i put a required tag on an input field so it doesn't really pass the form unless completed
Here's the form:
<div class="col-lg-12"> <form action="<?php echo base_url(); ?>products/purchase" role="form" accept-charset="utf-8" method="post"> <div class="form-group"> <div class="col-lg-12"> <label class="control-label">Name</label> <input type="text" name="name" class="form-control inline" required> </div> </div> <div class="form-group"> <div class="col-lg-10"> <label class="control-label">Class</label> <div class="input-group"> <select name="class_ID" class="form-control" required> <option value="">Select Class</option> <?php if(!empty($cls)){ if (is_array($cls)){ foreach ($cls as $row) {?> <option value="<?php echo $row['class_id']?>"><?php echo $row['class_Name']; ?></option> <?php } } } else{ ?> <option value=""></option> <?php }?> </select> <span class="input-group-btn"> <button class="btn btn-theme" data-toggle="modal" data-target="#addClass"><i class="fa fa-plus"></i></button> </span> </div> </div> </div> <div class="form-group"> <div class="col-lg-12 pull-right"> <input type="submit" class="btn btn-success pull-right" value="Order" style="margin-left:5px;"> </form> <a href="<?php echo base_url()?>purchases" class="btn btn-default pull-right">Back</a> </div> </div> </div>And the Modal:
<div class="modal fade" id="addClass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Add New Product Classification</h4> </div> <div class="modal-body"> <form action="<?php echo base_url(); ?>products/add_class" method="post" accept-charset="utf-8" role="form"> <div class="form-group"> <div class="col-lg-6"> <label for="class_Name">Classification Name</label> <input type="text" name="class_Name" class="form-control"> </div> </div> <div class="form-group"> <div class="col-lg-3"> <label for="is_active">Enabled</label> <select name="is_active" class="form-control"> <option value="1">Yes</option> <option value="0">No</option> </select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <input type="submit" class="btn btn-success" value="ADD"> </form> </div> </div> </div> </div> </div>最满意答案
可能是由于使用了类btn-success两次,当打开模式并在模型页脚底部触发时
change
<button> to <a> or you can tell <button type="button"> that it's button and should only do what button supposed to do which is not to submit the formw3schools.com/tags/att_button_type.asp
– Shehary
更多推荐
发布评论