how to load html page using ajax code - php

Question

i use the following code to load the form as below code
as Ajax code as below
function assessment_form() {
$this = $(this);
$.ajax({
url: 'view/assessment/assessment_form.php',
datatype: 'html',
success: function (data) {
$box = $('.span12');
$box.after(data);
$box.remove();
}
});
}
$(document).on('click', '#assessment_form', $(this), assessment_form);
and the form page as below in directory view/assessment/assessment_form.php
Add New User
<div class="box span12">
<div class="box-header well" data-original-title>
<h2> Add New User</h2>
</div>
<div class="box-content">
<form class="form-horizontal" id="user_form_data" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<label class="control-label" for="firstname">ROTC NO</label>
<div class="controls">
<input class="input-xlarge focused" id="rotc_no" name="rotc_no" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastname">Password</label>
<div class="controls">
<input class="input-xlarge focused" id="password" name="password" type="text" />
</div>
</div>

Answer 1

Simply, You can load html page into a div by using jquery's load() function.
Try this:
$('#yourDiv').load('pages/page1.html');

Answer 2

use this $(document).on('click','#assessment_form', assessment_form);
instead of $(document).on('click','#assessment_form',$(this),assessment_form);
Take a look for more information $.get()
// Make it little more flexible and easy
function assessment_form() {
$.get('your_url', function(data){
$box = $('.span12');
$box.after(data);
$box.remove();
});
}