+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Submitting Form With Bootstrap Modal Question (/showthread.php?tid=63138)
Submitting Form With Bootstrap Modal Question - wolfgang1983 - 09-29-2015
When I submit my form on my bootstrap modal, if any errors found I would like to be able to add class and stop it from closing if any errors found
What is the best solution
Script
PHP Code:
<script type="text/javascript">
$( "#layout-form<?php echo $layout['layout_id'];?>" ).submit(function( event ) {
event.preventDefault();
$.ajax({
url: <?php echo base_url('admin/design/layout/delete');?>,
});
// Need to add class if any errors
$("#name-<?php echo $layout['layout_id'];?>").addClass("has-error");
});
</script>
Controller Delete Function
PHP Code:
public function delete() {
$this->load->library('form_validation');
$this->form_validation->set_rules('name', 'Name', 'required|callback_name_check');
// $this variable is for MY_Form_validation library HMVC.
if ($this->form_validation->run($this) == FALSE) {
} else {
return true;
}
}
public function name_check() {
if ($this->input->post('name') == $this->input->post('name_check')) {
return true;
} else {
$this->form_validation->set_message('name_check', 'This ' .$this->input->post('name'). ' Does Not Match');
return false;
}
}
View
PHP Code:
<?php echo $header;?>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="page-header">
<h1><?php echo $heading_title;?></h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left" style="padding-top: 7.5px;">
<h1 class="panel-title">Layout List</h1>
</div>
<div class="pull-right">
<a href="<?php echo base_url('admin/design/layout/add');?>" role="button" class="btn btn-success">Add Layout</a>
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<td>Layout Name</td>
<td class="text-right">Action</td>
</tr>
</thead>
<tbody>
<?php if ($layouts) {?>
<?php foreach ($layouts as $layout) {?>
<tr>
<td><?php echo $layout['name'];?></td>
<td class="text-right">
<button type="button" data-toggle="modal" data-target="#myModal<?php echo $layout['layout_id'];?>" class="btn btn-danger">Delete</button>
<a href="<?php echo $layout['edit'];?>" role="button" class="btn btn-primary">Edit</a>
</td>
</tr>
<?php }?>
<?php } else { ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="panel-footer">
</div>
</div>
</div>
</div>
</div>
<?php foreach ($layouts as $layout) {?>
<?php echo form_open('admin/design/layout/delete/', array('id' => "layout-form" . $layout['layout_id'] . ""));?>
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $layout['layout_id'];?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel"><?php echo $layout['name'];?></h4>
</div>
<div class="modal-body">
<div class="form-group" id="name-<?php echo $layout['layout_id'];?>">
<input type="text" name="name" value="" placeholder="Layout Name" class="form-control" />
<input type="hidden" name="name_check" value="<?php echo $layout['name'];?>" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$( "#layout-form<?php echo $layout['layout_id'];?>" ).submit(function( event ) {
event.preventDefault();
$.ajax({
url: <?php echo base_url('admin/design/layout/delete');?>,
});
// Need to add class if any errors
$("#name-<?php echo $layout['layout_id'];?>").addClass("has-error");
});
</script>
<?php echo form_close();?>
<?php }?>
<?php echo $footer;?>RE: Submitting Form With Bootstrap Modal Question - mwhitney - 09-30-2015
Unless you have some JavaScript to override and prevent the default behavior of the submit button, submitting the form results in a new page being loaded by the browser, even if it happens to be the same page. You can check for validation errors and show the modal again when the page loads.
If you are preventing the default behavior and submitting the form via AJAX, then you would just have to send back some indication that validation failed and check for that in the JavaScript code which is run to process the response. If the response indicates there were no validation errors, you close the modal, otherwise, you display the errors.
RE: Submitting Form With Bootstrap Modal Question - wolfgang1983 - 09-30-2015
(09-30-2015, 08:04 AM)mwhitney Wrote: Unless you have some JavaScript to override and prevent the default behavior of the submit button, submitting the form results in a new page being loaded by the browser, even if it happens to be the same page. You can check for validation errors and show the modal again when the page loads.
If you are preventing the default behavior and submitting the form via AJAX, then you would just have to send back some indication that validation failed and check for that in the JavaScript code which is run to process the response. If the response indicates there were no validation errors, you close the modal, otherwise, you display the errors.
Do you have any examples? Or links
RE: Submitting Form With Bootstrap Modal Question - mwhitney - 10-01-2015
Opening a bootstrap modal on page load: http://stackoverflow.com/questions/10233550/launch-bootstrap-modal-on-page-load
jQuery AJAX forum submission with Bootstrap modal: https://gist.github.com/havvg/3226804
CodeIgniter AJAX modal form validation and submit: http://stackoverflow.com/questions/21465285/ajax-modal-form-validation-and-submit
http://lmgtfy.com/?q=bootstrap+modal+form+ajax+codeigniter