i want to submit a form via ajax but i dnt know why form is not submiting via ajax. why ajax not picking the submit id..this code just submitting as usual way but not through ajax help me where i am wrong ..
echo form_open('Contact_Controller/submit');
echo form_input('name', set_value('name'), 'id="name"');
echo form_input('email', set_value('email'), 'id="email"');
$data = array(
'name'=> 'message',
'id' => 'message',
'cols'=> '35',
'rows' => '12'
);
echo form_textarea($data, 'Message');
echo form_submit('submit', 'Submit', 'id="submit"');
?>
<script type = "text/javascript">
$('#submit').click(function(){
var form_data = {
name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val()
};
$.ajax({
url: "<?php echo site_url('tuts_Contact_Controller/submit'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
alert(msg);
}
});
</script>
you should prevent the default event of form submit like:
$('#submit').click(function(evt){
evt.preventDefault();
....
Use this way:
and i am guessing that you are having jquery above this script.
<script type = "text/javascript">
$(function(){ // <----------------missed the doc ready function
$('form').submit(function(e){
e.preventDefault(); // <------this will restrict the page refresh
var form_data = {
name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val()
};
$.ajax({
url: "<?php echo site_url('tuts_Contact_Controller/submit'); ?>",
type: 'POST',
data: form_data, // $(this).serialize(); you can use this too
success: function(msg) {
alert(msg);
}
});
});
});
</script>