Sam Sam - 3 days ago 5
jQuery Question

Not able to send bootstrap form from view to controller after bootstrap validations

Scenario


I have a bootstrap form built in codeigniter on which bootstrap
validation has been applied. And i wish that after the validation are
fulfilled the user can click on submit button and goes to the action
page(i.e controller).


Issue:


Submit button is not working, due to which the form is not getting
redirected


Goal:


Make the validation work and then redirect the form to the controller so that > value of the form can be saved in database


NOTE


Here is the link of a sample code that i have, the only
difference between the two is that the question that i am asking is in
codeigniter and the link is without codeigniter. However i need the
answer for codeigniter:


Code

<?php
$reg_attributes = array('id'=>'contact_form','class'=>'form-horizontal');
echo form_open('home/registeruser', $reg_attributes); ?>

<div class="form-group">
<?php
$data = array(
'type'=>'text',
'class' => 'form-control',
'name'=>'fullname',
'autocomplete'=>'off',
'placeholder'=>'Full Name',
'id'=>'user_name'
);
?>

<?php echo form_input($data); ?>
</div>

<div class="form-group">
<?php
$data = array(
'type'=>'submit',
'class'=>'btn btn-success btn-block',
'name'=>'submit',
'content'=>'Register',
'value'=>'submit',
);

echo form_button($data);
?>
</div>
<?php echo form_close(); ?>


Script

<script type="text/javascript">
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullname: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your full name'
}
}
},}
}) }); });
</script>

Answer

There are two things you need to fix

1 .You are using name "submit" for your submit button change it

<?php
        $data = array(
            'type'=>'submit',
            'class'=>'btn btn-success btn-block',
            'name'=>'save',
            'content'=>'Register',
            'value'=>'submit',
        );

        echo form_button($data); 
    ?>
  1. Remove extra brackets from your javascript code.

So it will look like this

$(document).ready(function () {
  $('#contact_form').bootstrapValidator({
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      fullname: {
        validators: {
          stringLength: {
            min: 2,
          },
          notEmpty: {
            message: 'Please supply your full name'
          }
        }
      },
    }
  })
});  // remove extra bracket from here
Comments