[eluser]backtoeleven[/eluser]
I have created a simple contact form and I am having a problem when performing a second submission. What I mean by that is if validation fails, the form is presented with the validation errors but when the form is resubmitted I am not seeing the results I am expecting.
The form data is being submitted by ajax request to the controller. When validation fails the controller passes back the form to display the validation errors. When you come to submit the form again it just seems to follow the link as though the jQuery function is no longer catching the submit.
Does anyone know why this might be happening? I've had a google and not found anything to suggest why.
The relevant code is as follows...
The Form:
Code:
<?php echo form_open('contact/submit',array('id' => 'contactForm')); ?>
<fieldset>
<h2>Send Us A Message</h2>
<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() {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
};
var data = {
'name' : $('#name').val(),
'phone' : $('#phone').val(),
'email' : $('#email').val(),
'message' : $('#message').val()}
$.ajax({
url: "<?php echo site_url(); ?>/contact/submit",
type: "post",
data: data,
cache: false,
success: function(html){
$("#contactForm").replaceWith(html);
}
});
return false;
});
});
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');
}
}