I have the 3 php files when the user clicks a form the 2.php file is loaded to see if user can fill out the form or not if he can a form shows up and after he fills up the form I want the result displayed in the div id=content of 1.php
Is calling/opening the php file with form content in new window better practice than loading it in div.Is loading the div unnecessary hardwork? i think its better for user to click links and see what he wishes to see in the div id=content on the same page.
Is it good practice?
Also i'm facing an issue with loading the form results in the div after i click submit the form disappears something i'm doing wrong?
here are the 3 files
1.php
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<link rel="stylesheet" href="css/layout.css"; />
</head>
<body>
<div id="header">
</div>
<div id="menu">
<a href="#" id="l1"> Form </a>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
<script>
$(document).ready(function(){
$('#l1').click(function(){
$('#content').load('2.php');
});
});
</script>
</html>
2.php
<?php
//code here that checks if user can fill form
echo'<script>$("#content").load("3.php");</script>';
// if user cannot
echo "You have already filled";
?>
3.php
<?php
//check for user session and form_status using $_SESSION
if( isset($_POST['submit']) ){
$form_value=array();
foreach($_POST as $key => $value){
$form_value[$key]=htmlspecialchars(trim($value),ENT_QUOTES);
echo "{$form_value[$key]}<br/>";
}
}
?>
<form method="post" name="stud_det" id="stud_det" action="" >
<table>
<tr>
<td>Name :</td><td><input type="text" name="name" /></td>
</tr>
<tr>
<td>Register Number :</td><td><input type="text" name="regno"/></td>
</tr>
<tr>
<td>Date of Birth :</td><td><input type="text" name="dob"/></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit" style="font-size:16px;"/></td>
</tr>
</table>
</form>
<script>
$("#stud_det").submit(function(){
$.ajax({
data: $(this).serialize(),
type: $(this).attr("post"),
url: $(this).attr("3.php");
success: function(response){
$("#content").html(response);
}
});
return true;
});
</script>
layout.css
#menu{
position:absolute;
top:10%;
bottom:10%;
left:0;
right:90%;
background-color:#7c7;
font-size:18px;
}
#header{
position:absolute;
top:0;
bottom:90%;
left:0;
right:0;
background-color:#ff0;
}
#footer{
position:absolute;
top:90%;
bottom:0;
left:0;
right:0;
background-color:#fcf;
}
#content{
position:absolute;
top:10%;
bottom:10%;
left:10%;
right:0;
background-color:#ccc;
text-align:center;
font-size:18px;
}
