Bootstrap Modal Form wont work with CodeIgniter - php

Question

I'm very new to codeigniter.
here's my problem. when i load my MODAL LOGIN form and i press the submit button. It wouldn't do anything. What i would like to happen is just to go to these 4 views (student,instructor,adviser,admin) pages. I don't want to pass values for now. Focus only on switching views.
index.php (the modal part)
<!-- Modal Log in Form-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form action="" method="POST" id="form" role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter id no.">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<input type="Submit" value="LOG IN" class="btn btn-success btn-block">
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
</div>
</div>
I didn't put anything on that action="". because of this.(to be dynamic) when the user want to sign in as student he/she go to student page. or as admin he/she go to admin page. and etc.
freelancer.js
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/studentsignin'?>";
});
});
$(document).ready(function(){
$("#myBtn2").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/instructorsignin'?>";
});
});
$(document).ready(function(){
$("#myBtn3").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/advisersignin'?>";
});
});
$(document).ready(function(){
$("#myBtn4").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/adminsignin'?>";
});
});
logbooks.php (from the controller)
class logbooks extends CI_Controller{
function __construct(){
parent::__construct();
}
function studentsignin(){
$this->load->view('student_view');
}
function instructorsignin(){
$this->load->view('instructor_view');
}
function advisersignin(){
$this->load->view('adviser_view');
}
function adminsignin(){
$this->load->view('admin_view');
}
}
but if i just input the relative path for example http://localhost/WEB/index.php/logbooks/studentsignin in the browser. I can view the student page.
PLEASE help. I don't know how to solve this problem.

Answer 1

Change your submit button to just button.
In click event after set "form action" you can use this too:
$(document).ready(function(){
$("#myBtn4").click(function(){
$("#myModal").modal();
$("#form").attr('action',"<?php echo base_url('index.php/logbooks/adminsignin')?> ";
});
$("#form").submit();
});
The point is use $("#form").submit();
I hope It Work For you.