Forms and Bootstrap modal - php

Question

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>
Back
</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>

Answer 1

Possibly due to using class btn-success twice, You hit it when opening the modal and its triggered at the bottom of the model footer

Answer 2

balance your html tags
i.e. for every opened tag, there must exist a closed tag and in the same order too.
in your modal, youre opening your form tag inside a div that is closed before the form tag is closed. some browsers may automatically close this tag, and therefore the click on your submit button will propagate to the main form.
change to
<div>
<form>
</form>
</div>
open your form before .modal-dialog

Answer 3

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 form
w3schools.com/tags/att_button_type.asp
– Shehary