[jQuery] PHP and ajaxForm submit generates duplicate HTML!
First, here is my code for test.php file. It has a form with 2 text
fields. Once submitted it adds a record to database and gives a
message "1 record added." in a div "message" :
<?php require_once('Connections/local.php'); ?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#form1').ajaxForm({
target: '#message', success: function(){$
('#message').fadeIn('slow');}
});
});
</script>
</head>
<body>
<?php if (!isset($_POST['submit'])) {
?>
<div id="form">
<form id="form1" action="<?php $_SERVER['PHP_SELF']; ?>"
method="post" name="form1">
<input id="email" name="email" type="text" />
<input name="password" type="text" />
<input class="submit" name="submit" type="submit" value="submit" />
</form>
</div>
<?php
}
else {
$email =$_POST['email'];
$pass =$_POST['password'];
mysql_select_db("iupgbsa_gbsa", $local);
$sql = "INSERT INTO tempdb (email, password) VALUES ('$email',
'$pass')";
if (!mysql_query($sql))
{
die('Error: ' . mysql_error());
}
$msg = "1 record added.";
}
?>
<div id="message">
<?php echo $msg; ?>
</div>
</body>
</html>
The problem is, every time I add a new record the message div fills up
with a new line "1 record added." and if I check the source code,
inside "message' there is another "message" created. So if I add 10
records, original "message" div fills up with 10 more same div and
therefore 10 lines of "1 record added.". Eventually the file size
increases. How do I solve this problem? I'm new to JQuery. Please help!