Ajax Form Submission in IE

[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">
                &lt;?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>');
       ?&gt;
      </div>
              <div class="form-group">
                &lt;?php
                 echo form_label('Phone', 'phone');
        echo form_input(array('id'=>'phone','name'=>'phone','value'=>set_value('phone')));
       ?&gt;
      </div>    
              <div class="form-group">
                &lt;?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>');
       ?&gt;
      </div>
      <div class="form-group">
                &lt;?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>');
       ?&gt;
      </div>
      <div class="form-action">
       &lt;?php echo form_button(array('id'=>'submit','name'=>'submit','type'=>'submit','content'=>'Send Message')); ?&gt;
      </div>
     </fieldset>
    &lt;?php echo form_close(); ?&gt;

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.

[eluser]CroNiX[/eluser]
You are submitting to a relative URL in your ajax ('contact/submit'). Try a full URL.

[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.

[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();