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!