php Ajax and jquery form loading then submission not working - php

Question

I have 4 files testmain.php test1.php test2.php test3.php, in the testmain.php I have a div with class "content_load" where I am loading 3 files on click one by one, they are loading fine but test1.php is a form file when it's finish loading I am submitting it with ajax but it's getting redirect, I am trying since yesterday but not able to solve this, if I do not load files with ajax and just submit the test1.php that works fine, but when I combine the code of loading files using load() and submit with $.ajax() then code for loading files works fine but get redirect any solve this issue for me please so I can go ahead with my learning.
testmain.php
<div id="menu_top">
<a class="menu_top" href="test1.php">TEST 1</a> /
<a class="menu_top" href="test2.php">TEST 2</a> /
<a class="menu_top" href="test3.php">TEST 3</a> /
</div>
<div class="content_load"></div>
test1.php
<form class="ajax" action="test1.php" method="post" enctype="multipart/form-data">
<input type="text" name="txt1" /> <br>
<input type="text" name="txt2" /> <br>
<select name="sel">
<?php
include '../mysql_connect.php';
$db = new DBConfig();
$conn = $db->getDbPDO();
$sql = "SELECT * FROM tbl_campus ORDER BY camp_id ASC";
//$sql = "SELECT camp_id FROM tbl_campus ORDER BY camp_id ASC";
$query = $conn->query($sql);
$result = $query->fetchAll(PDO::FETCH_ASSOC);
$arrlength = count($result);
for ($x = 0; $x < $arrlength; $x++){
?>
<option value="<?php echo $result[$x]['camp_id']; ?>"><?php echo $result[$x]['camp_name']; ?>
<?php } ?>
</select>
<br><br>
<input type="submit" value="Click" name="submit" />
</form>
test2.php & test 3.php
<h3>THIS IS TEST 2</h3> <h3>THIS IS TEST 2</h3>
jquery file
$(document).ready(function() {
$('.content_load').load($('.menu_top:first').attr('href'));
$('.menu_top').click(function(){
var page = $(this).attr('href');
$('.content_load').load(page); return false; });
$('form.ajax').on('submit', function(e){
e.preventDefault();
var that = $(this);
url = that.attr('action'), type = that.attr('method'), data = {};
that.find('[name]').each(function(index, value){
var that=$(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response){
console.log(response);
}
});
clearAll();
return false;
});
});
function clearAll(){
$("form :input").each(function(){
$(this).val("");
});
}

Answer 1

You cannot use direct event handler to the element that is not loaded yet.Just try to change this line:
$('form.ajax').on('submit', function(e){
to:
$('.content_load').on('submit','form.ajax', function(e){
otherwise javascript doesn't bind that event to the form and regular submit occurs.
Great explanation of the difference here: Direct vs. Delegated - jQuery .on()

Answer 2

May I misunderstood the problem, but if you submit the site would execute the form action.
If you dont want this, you need to add "return false" on submit, or make a "button" and no "input" for submitting.