How to send information to database without reloading the page - php

Question

I've been trying to send information to the database using AJAX but nothing is working, each time i click the submit button, nothing works, the pages stays static somewhat. All JS files are referenced properly so i'm not sure what i'm doing wrong.
Here's what i've done so far;
Controller:
public function contact_us_ajax() {
//form validation rules and file upload config
$this->form_validation->set_rules('name', 'Name', 'trim|required');
$this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');
$this->form_validation->set_rules('subject', 'Subject', 'trim|required');
$this->form_validation->set_rules('message', 'Message', 'trim|required');
$this->form_validation->set_rules('captcha_code', 'Captcha Code', 'trim');
$this->form_validation->set_rules('c_captcha_code', 'Captcha Code', 'trim|required|matches[captcha_code]',
array(
'required' => 'Captcha is required. Reload the page if you cannot see any code.',
'matches' => 'Invalid captcha code'
)
);
if ($this->form_validation->run()) {
$this->message_model->contact_us(); //insert the data into database
$res = ['status' => true, 'msg' => 'Message sent successfully!'];
echo json_encode($res);
} else {
$res = ['status' => false, 'msg' => validation_errors()];
echo json_encode($res);
}
}
Model:
public function contact_us() {
$name = ucwords($this->input->post('name', TRUE));
$email = $this->input->post('email', TRUE);
$subject = ucwords($this->input->post('subject', TRUE));
$message = ucfirst($this->input->post('message', TRUE));
$message = nl2br($message);
$data = array (
'name' => $name,
'email' => $email,
'subject' => $subject,
'message' => $message,
);
$this->db->insert('contact_messages', $data);
//email admins
//$this->notify_admins($name, $email, $subject, $message);
}
View:
<?php
$form_attributes = array("id" => "contact_us_form");
echo form_open('home/contact_us_ajax', $form_attributes); ?>
<!-- Contact Form -->
<div class="col-md-5">
<h4>Send Us a Message</h4>
<div class="form-group">
<label>Name:</label><input type="text" name="name" class="form-control input-field" required>
<label>Email:</label><input type="email" name="email" class="form-control input-field" required>
<label>Subject:</label><input type="text" name="subject" class="form-control input-field" required>
</div>
<label>Message:</label>
<textarea name="message" class="textarea-field form-control" rows="4" required></textarea>
<div class="col-md-6">
<input type="text" name="captcha_code" id="captcha_code" value="<?php echo $captcha_code; ?>" class="form-control" readonly />
</div>
<div class="col-md-6">
<input type="text" name="c_captcha_code" value="<?php echo set_value('c_captcha_code'); ?>" class="form-control" placeholder="Enter captcha code here*" required />
</div>
<div id="status_msg"></div>
<?php echo flash_message_success('status_msg'); ?>
<?php echo flash_message_danger('status_msg_error'); ?>
<button class="btn center-block">Send message</button>
</div>
<?php echo form_close(); ?>
AJAX:
//Contact Us
$('#contact_us_form').submit(function(e) {
e.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url: base_url + 'home/contact_us_ajax',
type: 'POST',
data: form_data,
dataType: 'json',
success: function(res) {
if (res.status) {
$( '#status_msg' ).html('<div class="alert alert-success text-center" style="color: #000">'+res.msg+'</div>').fadeIn('fast');
$('#contact_us_form')[0].reset(); //reset form fields
$('#captcha_code').val(''); //clear captcha field
setTimeout(function() {
location.reload();
}, 5000);
} else {
$( '#status_msg' ).html('<div class="alert alert-danger text-center" style="color: #000">' + res.msg + '</div>').fadeIn('fast').delay( 30000 ).fadeOut( 'slow' );
}
}
});
});

Answer 1

base_url is defined in codeigniter's config.php, for example like:
$config['base_url'] = 'http://or.org/';
BUT! This doesn't mean you can simply name a variable in javascript base_url and hope to get any value.
To use it in your ajax call, you need to echo the php constant out like:
url: '<?php echo base_url()?>' + 'home/contact_us_ajax'
I normally just use the relative path
url: '/home/contact_us_ajax'
which works fine as well, if you use a "regular" CI configuration