How to load only the content area when click submit button?
Question
My code is like this :
<html>
<head>
<title>Test Loading</title>
</head>
<body>
<div id="header">
This is header
</div>
<div id="navigation">
This is navigation
</div>
<div id="content">
<form action="test2.php" method="post">
<table>
<tr>
<td>First Name</td>
<td>:</td>
<td><input type="text" name="first_name"></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" name="last_name"></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><input type="text" name="hobby"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" Value="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="footer">
This is footer
</div>
</body>
</html>
The complete code of test1.php : http://pastebin.com/idcGms0h
The complete code of test2.php : http://pastebin.com/rvBPTrhn
I want to load only the content area and skip header, navigation and footer loading
Besides that, I also want to add loading
Seems to use ajax, but I am still confused
How to load only the content area when click submit button?
Any help much appreciated
Cheers
3 answers
solution1
1 ACCPTED 2016-02-05 05:40:49
you need to use ajax. please try this instead
before submit
<!DOCTYPE html>
<html>
<head>
<title>Test Loading</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div id="header">
This is header
</div>
<div id="navigation">
This is navigation
</div>
<div id="content">
<form action="" id="info">
<table>
<tr>
<td>First Name</td>
<td>:</td>
<td><input type="text" name="first_name"></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" name="last_name"></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><input type="text" name="hobby"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</div>
<button id="submit">Submit</button>
<div id="footer">
This is footer
</div>
</body>
</html>
<script type="text/javascript">
var postData = "text";
$('#submit').on('click',function(){
$.ajax({
type: "post",
url: "test2.php",
data: $("#info").serialize(),
contentType: "application/x-www-form-urlencoded",
success: function(response) { // on success..
$('#content').html(response); // update the DIV
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
})
});
</script>
test2.php contents
<table>
<tr>
<td>First Name</td>
<td>:</td>
<td> <?php echo $_POST['first_name']; ?></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><?php echo $_POST['last_name']; ?></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><?php echo $_POST['age']; ?></td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><?php echo $_POST['hobby']; ?></td>
</tr>
solution2
0 2016-02-05 05:13:43
You need to use ajax . to update only a part of the page. firstly,give unique id's to form elements 1. i have given form an id regForm 2. submit button an id submitButton
you can either listen to form submit or click of the submit button
listening to the click of submit button ....
$("input#submitButton").on("click",function(event){
event.preventDefault();
var data = $('form#regForm').serialize();
$.ajax({
url: "test2.php",
method: "POST",
data: { data : data },
dataType: "html"
})
.done(function( responseData ) {
console.log("theresponse of the page is"+responseData);
$("div#content").empty();
///now you can update the contents of the div...for now i have just entered text "hey i m edited" ....and i have considered that you will echo out html data on test2.php .....so specified data type as html in ajax.
$("div#content").html("hey i m edited");
})
.fail(function( jqXHR, textStatus ) {
console.log("error occured");
});
})
solution3
0 2016-02-05 05:34:13
Well you have to use jquery ajx for that.istead of writting a big code you can just use this plugin http://malsup.com/jquery/form/ when you using this plugin you don't have to change anything of your form (except setting a form ID)
$(document).ready(function() {
var options = {
target: '#output', //this is the element that show respond after ajax finish
};
// bind to the form's submit event
$('#myForm').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
Change your form like that:
<form action="test2.php" method="post" id="myForm">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.