表单和引导模式(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>