Submit form after form load is blank - php

Question

I make index.php like this:
<script src="js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#sload").load('save1.php',function(forma){
$(".csave").click(function(){
$.ajax({
type: 'POST',
url: $('#form1').attr('action'),
data: $('#form1').serialize(),
success: function(data) {
alert(data);
}
})
return false;
});
});
});
</script>
SAVE
<div id="sload"></div>
save1.php like this :
<table>
<form method="post" name="form1" id="form1" action="input1.php">
<tr>
<td>Date</td><td>:</td><td><input name="date" id="date"/></td>
</tr>
<tr>
<td>Location</td><td>:</td><td><input name="location" id="location" /></td>
</tr>
</form>
and input1.php
<? session_start();
include "db.php";
$date=$_POST['date'];
$location=$_POST['location'];
mysql_query("insert into hal (date,location) values ('$date','$location')");
?>
after I click SAVE not an error, but the database is stored in an empty field. Submit form after form load is blank
Thanks.

Answer 1

You need to separate the logic of loading and saving like this:
Here's an example (based on your code) as a single page script test.php:
<?php
// Load Form
if (isset($_GET['loadForm']))
{
exit('<form method="post" name="form1" id="form1" action="test.php">
<table>
<tr>
<td>Date</td><td>:</td><td><input name="date" id="date"/></td>
</tr>
<tr>
<td>Location</td><td>:</td><td><input name="location" id="location" /></td>
</tr>
</table>
</form>');
}
// Handle Form Save
if (count($_POST) > 0)
{
// TODO
exit('got form data: '. print_r($_POST, true));
}
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// When Page Loads
$(document).ready(function()
{
// Load Form
$('#sload').load('test.php?loadForm');
// Handle Save Click
$('.csave').click(function()
{
$.ajax({
type: 'POST',
url: $('#form1').attr('action'),
data: $('#form1').serialize(),
success: function(data) {
alert(data);
}
});
});
});
</script>
SAVE
<div id="sload"></div>
When I click save, this is what the output is:
To complete this code, add the db row inserting code where it says TODO. Hope this helps.
Update
Here's the split version:
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// When Page Loads
$(document).ready(function()
{
// Load Form
$('#sload').load('save1.php');
// Handle Save Click
$('.csave').click(function()
{
$.ajax({
type: 'POST',
url: $('#form1').attr('action'),
data: $('#form1').serialize(),
success: function(data) {
alert(data);
}
});
});
});
</script>
SAVE
<div id="sload"></div>
save1.php
<form method="post" name="form1" id="form1" action="input1.php">
<table>
<tr>
<td>Date</td><td>:</td><td><input name="date" id="date"/></td>
</tr>
<tr>
<td>Location</td><td>:</td><td><input name="location" id="location" /></td>
</tr>
</table>
</form>
input1.php
<?php
session_start(); // what's this for? you aren't using session on this file
// this is not safe! use mysqli or pdo and escape post values!!!
include "db.php";
$date=$_POST['date'];
$location=$_POST['location'];
mysql_query("insert into hal (date,location) values ('$date','$location')");
?>