forms to update database in div=content - php

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="./js/jquery.blockUI.js"></script>
<script>
$(document).ready(function(){
$(".menuLink").click(function(){
$('#content').block({
centerY: 0,
css: { top: '40px', left: '', right: '10px' },
message: '<img src="./Images/ajax_loader.gif" /><br /><h3>Loading...Please wait.</h3>'
});
$.ajax({
type: "POST",
url: $(this).attr('href'),
cache: false,
success: function(html){ $("#content").html(html); }
});
});
$(document).ajaxStop(function(){
$('#content').unblock();
});
});
</script>
This is the code I have for geting links in div id=menu when clicked they load the php file into div id=content ahref I have is here.
<p><a class="menuLink" href="Test.php" onclick="return false;">Wall</a></p>
Now the class and onclick with script above is what makes the Test.php load in div id=content when that link is clicked on div id=menu.
Below is the script in Test.php
session_start();
include_once("connect.php");
include_once("functions.php");
if($_POST['WallSubmit'] && $_POST['Wall']){
$wall = makesafe($_POST['Wall']);
mysql_query("INSERT INTO `Wall` (`ID`, `Username`, `MessageBy`, `Date`, `Message`) VALUES ('', '', '$username', '" . time() . "', '$wall')");
}
<form method='post'>
<table class="default" style="width: 80%" align="center">
<tr>
<td class="subheader">Wall</td>
</tr>
<tr>
<td class="content">Post a comment.<br /><textarea name='Wall' id='Wall' style='width: 99%; height: 110px;'></textarea><br /><br/><center><input type='submit' value='Post' name='WallSubmit' /></center><br /><hr><br />Latest Comments.</td>
</tr>
</td>
</table>
</form>
Now the problem I am having is once I have clicked wall on menu as can see in href it loads into div id=content no problem at all so now the Test.php is displayed in content div but now when I fill in that form on Test.php it just refreshes to the default content page and it does not update the database if it doesnt refresh to that default content there then the button does not do anything when click, Now I know the coding works for the database and form as it's been tested in a framed layout and also works if I set Test.php to the default content page, will put default content as I have in page.
<div id="content" class="auto">
<?include_once("Test.php");?>
</div>
What is trhe solution for this? I know it sounds abit confusing but all I want is to figure out once I click Wall on menu and it loads Test.php into div id=content how to get the form in Test.php to do it's job lol.

Answer 1

The action of your form, since not specified, simply refreshes the page and submits WallSubmit and Wall to the main page, rather than to test.php. Instead, you could specify the action like so:
<form action='test.php' id='wallForm' method='post'>
However, this would simply take the user to a blank page with the contents of test.php. Instead, within the javascript, an ajax call must be made:
$(document).ready(function() {
...
$(document).on("submit","#wallForm",function(){
$.ajax({
type: "POST",
url: $(this).attr('action'),
cache: false,
data: {Wall: $("#Wall").val(), wallSubmit: $("[name=WallSubmit]").val()},
success: function(html){ $("#content").html(html); }
});
});
...
});
on() has to be called because the form was loaded after the DOM was. Javascript won't recognize it otherwise, as it only deals with content loaded into the DOM. For more information on this, this site contains some useful information.
If you want to have a generic form submission function, serialize() should probably do the trick. The jQuery API page should summarize this well. You would replace the data: {Wall: ...} with data: $(this).serialize(). This function takes the valid fields in a form and places it into a string that can be used to set data to a php file. However, I'm not quite sure what the effect the WallSubmit name has on the form. From what I can tell, you can eliminate that step altogether.