+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Ajax Form Submission in IE (/showthread.php?tid=49638)
Ajax Form Submission in IE - El Forum - 02-27-2012
[eluser]backtoeleven[/eluser]
I have created a simple contact form to be submitted via an ajax function but having problems when coming to run it in Internet Explorer (tested on IE8 - no other versions available to me at the moment).
I'll post in the relevant code below and hopefully someone might be able to spot where I'm going wrong...
The Form:
Code:
<?php echo form_open('test/submit', array('id' => 'contactForm')); ?>
<fieldset>
<div class="form-group">
<?php
echo form_label('Name', 'name');
echo form_input(array('class'=>'required','id'=>'name','name'=>'name','value'=>set_value('name')));
echo form_error('name', '<div class="error">', '</div>');
?>
</div>
<div class="form-group">
<?php
echo form_label('Phone', 'phone');
echo form_input(array('id'=>'phone','name'=>'phone','value'=>set_value('phone')));
?>
</div>
<div class="form-group">
<?php
echo form_label('Email', 'email');
echo form_input(array('class'=>'required','id'=>'email','name'=>'email','value'=>set_value('email')));
echo form_error('email', '<div class="error">', '</div>');
?>
</div>
<div class="form-group">
<?php
echo form_label('Message','message');
echo form_textarea(array('class'=>'required','id'=>'message','name'=>'message','rows'=>'5','value'=>set_value('message')));
echo form_error('message', '<div class="error">', '</div>');
?>
</div>
<div class="form-action">
<?php echo form_button(array('id'=>'submit','name'=>'submit','type'=>'submit','content'=>'Send Message')); ?>
</div>
</fieldset>
<?php echo form_close(); ?>The jQuery function:
Code:
$(document).ready(function() {
$('#contactForm').submit(function() {
event.preventDefault();
var data = {
'name' : $('#name').val(),
'phone' : $('#phone').val(),
'email' : $('#email').val(),
'message' : $('#message').val()}
$.ajax({
url: "contact/submit",
type: "post",
data: data,
cache: false,
success: function(html){
$("#contactForm").replaceWith(html);
}
});
});
});The Controller:
Code:
public function submit()
{
if ($this->input->is_ajax_request())
{
$this->load->library('form_validation');
$this->form_validation->set_rules('name', 'Name', 'trim|required|xss_clean');
$this->form_validation->set_rules('phone', 'Phone', 'trim|xss_clean');
$this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email|xss_clean');
$this->form_validation->set_rules('message', 'Message', 'trim|required|xss_clean');
if ($this->form_validation->run() == FALSE)
{
echo $this->load->view('contact/form');
}
else
{
echo $this->load->view('contact/thanks');
}
}
else
{
redirect('contact','refresh');
}
}So to clarify, I am posting the form contents to the controller via the ajax function and depending on the outcome of the validation I am either displaying the form with the errors or displaying a thank you message.
If you have any suggestions as to why this is not working for me in IE I would welcome your comments.
Thanks,
Matt.
Ajax Form Submission in IE - El Forum - 02-27-2012
[eluser]CroNiX[/eluser]
You are submitting to a relative URL in your ajax ('contact/submit'). Try a full URL.
Ajax Form Submission in IE - El Forum - 02-27-2012
[eluser]backtoeleven[/eluser]
Thanks for that, seemed to improve the situation and highlight further issues. I wasn't aware that IE didn't like the event.preventDefault method either so I've put a work around in for that. Don't you just love IE.
Thanks for the help.
Ajax Form Submission in IE - El Forum - 02-27-2012
[eluser]CroNiX[/eluser]
Well, you need to get the event in the function to begin with in order to manipulate, or prevent it. Otherwise, 'event' will be undefined (which IE also doesn't like).
Code:
$('#contactForm').submit(function(event) {//need to add event to the function
event.preventDefault();