I have this form where i can insert data, on code igniter. it has validations, all i want to do is to make it ajax. how can I put ajax on it?
my codes,
controller
// CREATE /////////////////////////////////////////////////////////
public function create(){
$this->form_validation->set_rules('PROVINCE','Province Name','trim|required|max_length[30]|callback_if_exist');
if($this->form_validation->run($this) == FALSE){
$this->add_view();
}else{
if($query = $this->Provinces_Model->insert()){
redirect('Provinces/index');
}else{
$this->add_view();
}
}
}
/////////// Checking duplicates
public function if_exist(){
$available = $this->Provinces_Model->check_if_exist(); //change
if($available){
return TRUE;
}else{
$this->form_validation->set_message('if_exist','{field} already exist!');
return FALSE;
}
}
models
/// call back
public function check_if_exist(){
$sql = "SELECT * FROM $this->table WHERE PROVINCE = ?";
$data = array('PROVINCE' => $this->input->post('PROVINCE'));
$query = $this->db->query($sql, $data);
if($query->num_rows() == 0){
return TRUE;
}else{
return FALSE;
}
}
///// CREATE /////////////////////////////////////////////////////////
public function insert(){
$input = array(
'PROVINCE' => $this->input->post('PROVINCE')
);
$insert = $this->db->insert($this->table,$input);
return $insert;
}
and finally the view
<div class="box-body">
<div class="form-group">
<label for="PROVINCE" class="col-sm-2 control-label col-sm-offset-2">Province Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="PROVINCE" name="PROVINCE" value = "<?= set_value("PROVINCE"); ?>">
</div>
</div>
<div class="form-group has-error col-sm-offset-7">
<label class="control-label" for="error"><?php echo form_error("PROVINCE"); ?></label>
</div>
</div>
notice that I have the error reporting so and value = "<?= set_value("PROVINCE"); ?>" for retaining the value i inserted if its values did not pass the validation.. now I want to make it ajax as a practice because the next part that I am going to do is after I submitted a form, it will go to another form.
Edit your code like below:
Controller:
public function create(){
$this->form_validation->set_rules('PROVINCE','Province Name','trim|required|max_length[30]|callback_if_exist');
if($this->form_validation->run() == FALSE){
echo 'ERR';
}else{
if($query = $this->Provinces_Model->insert()){
redirect('Provinces/index');
}else{
$this->add_view();
}
}
}
And the view's Javascript part:
<script type="text/javascript" >
$('#send').click(function(){ // you should add an id called "send" to your submit button
var province = $('#province').val();
$.ajax({
type:'POST',
url:'yourposturl',
data: province,
success:function(response){
if (response = 'ERR') {
$("#response").html('Some error text');
}
else {
$("#response").html('Some success text');
}
}
});
});
</script>
Also please change <label class="control-label" for="error"> part to <label class="control-label" id="response" for="error"> if you want to use this method.