CodeIgniter Forums

Full Version: Submitting Form With Bootstrap Modal Question
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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">&times;</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;?>
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.
(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
Opening a bootstrap modal on page load: http://stackoverflow.com/questions/10233...-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/21465...and-submit

http://lmgtfy.com/?q=bootstrap+modal+for...odeigniter