AJAX CI (basic)

/application/controller/contact.php

1	/application/controller/contact.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
	
	class Contact extends CI_Controller {
	
		public function index() {
			
			$data['main_content'] = 'contact_form';
			$this->load->view('include/template', $data);
		}
		
		public function submit() {
			
			$name = $this->input->post('name');
			$is_ajax = $this->input->post('ajax');
			$data['main_content'] = 'contact_submited';
			
			if ($is_ajax) {
				$this->load->view($data['main_content']);
			}
			else {
				$this->load->view('include/template', $data);
			}
		
		}
		
	}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Contact extends CI_Controller {

public function index() {

$data['main_content'] = 'contact_form';

$this->load->view('include/template', $data);

}

public function submit() {

$name = $this->input->post('name');

$is_ajax = $this->input->post('ajax');

$data['main_content'] = 'contact_submited';

if ($is_ajax) {

$this->load->view($data['main_content']);

}

else {

$this->load->view('include/template', $data);

}

/application/views/contact_form.php

1	/application/views/contact_form.php

<div id="contact_form">
	<h1>Contact Us!</h1>
	<?php 
	
		echo form_open('contact/submit');
		echo form_input('name', 'Name', 'id="name"');
		echo form_input('email', 'Email', 'id="email"');
		$data = array(
				'name' => 'message',
				'cols' => 30,
				'rows' => 15
			);
		echo form_textarea($data, 'Message', 'id="message"');
		echo form_submit('submit', 'Submit', 'id="submit"');
		echo form_close();
	
	?>
</div>

<script type="text/javascript">
$('#submit').click(function(){
	
	var name = $('#name').val();
	
	if(!name || name == 'Name') {
		alert('Please enter your name');
		return false;
	}
	
	var form_data = {
		name: $('#name').val(),
		email: $('#email').val(),
		message: $('#message').val(),
		ajax: '1'
	};
	
	$.ajax({
		url: "<?php echo site_url('contact/submit'); ?>",
		type: 'POST',
		data: form_data,
		success: function(msg) {
			$('body').html(msg);
		}
	});
	
	return false;
});
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<h1>Contact Us!</h1>

<?php

echo form_open('contact/submit');

echo form_input('name', 'Name', 'id="name"');

echo form_input('email', 'Email', 'id="email"');

$data = array(

'name' => 'message',

'cols' => 30,

'rows' => 15

);

echo form_textarea($data, 'Message', 'id="message"');

echo form_submit('submit', 'Submit', 'id="submit"');

echo form_close();

?>

</div>

$('#submit').click(function(){

var name = $('#name').val();

if(!name || name == 'Name') {

alert('Please enter your name');

return false;

}

var form_data = {

name: $('#name').val(),

email: $('#email').val(),

message: $('#message').val(),

ajax: '1'

};

$.ajax({

url: "<?php echo site_url('contact/submit'); ?>",

type: 'POST',

data: form_data,

success: function(msg) {

$('body').html(msg);

}

});

return false;

});

</script>

/application/views/contact_submited.php

1	/application/views/contact_submited.php

<div id="contact_form">
	<h1>Thank You!</h1>
</div>

1

2

3

<h1>Thank You!</h1>

</div>