need help with submit button using ajax [Archive]

doforumda

02-11-2010, 08:02 AM

Hi
what i want to do in the following code is when submit button is clicked then send data to php file and display it back again. and if submit button is not clicked then just display data from database which is already present in db.

posts.js
window.onload = initAll;

function initAll () {

if(submit) {
var url = 'posts.php';
var queryString = $('#form1').serialize();
$.ajax(
{
type: 'POST',
url: url,
data: queryString,
dataType: 'html',
success: showMessage
});

function showMessage(resultData) {
$('#message').html(resultData).fadeIn('slow');
}
}
else {
var url = 'posts.php';

$.ajax(
{
type: 'POST',
url: url,
dataType: 'html',
success: showMessage
});

function showMessage(resultData) {
$('#message').html(resultData).fadeIn('slow');
}
}
}

posts.hmtl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script type="text/javascript" src="posts.js"></script>
<title>Untitled Document</title>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
<p>
<label>comment
<textarea name="post" id="post" cols="45" rows="5"></textarea>
</label>
</p>
<p>
<label>
<input type="button" name="submit" id="post" value="Submit" onclick="posts()" />
</label>
</p>
</form>
</body>
<div id="message"></div>
</html>