Display popup message after record has been added to mysql database using html form

Question

I have the following html form:

<html>
<body>
<form action="insert.php" method="post">
Firstname: <input type="text" name="firstname" />
Lastname: <input type="text" name="lastname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
</body>
</html>

And this is the .php file:

<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("my_db", $con);

$sql="INSERT INTO Persons (FirstName, LastName, Age)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
echo "1 record added";

mysql_close($con);
?>

How do I get a popup message that displays for 2 seconds after a record has been submitted that says for example "Record added"

As stated in the PHP manual for the [`mysql_query()`](http://php.net/manual/en/function.mysql-query.php) function: *Use of this extension is discouraged. Instead, the [MySQLi](http://www.php.net/manual/en/book.mysqli.php) or [PDO_MySQL](http://www.php.net/manual/en/ref.pdo-mysql.php) extension should be used. See also [MySQL: choosing an API](http://www.php.net/manual/en/mysqlinfo.api.choosing.php) guide and [related FAQ](http://www.php.net/manual/en/faq.databases.php#faq.databases.mysql.deprecated) for more information.* — eggyal, Jul 02 '12 at 14:56
**Your code is vulnerable to SQL injection.** You *really* should be using [prepared statements](http://stackoverflow.com/a/60496/623041), into which you pass your variables as parameters that do not get evaluated for SQL. If you don't know what I'm talking about, or how to fix it, read the story of [Bobby Tables](http://stackoverflow.com/questions/332365/xkcd-sql-injection-please-explain). — eggyal, Jul 02 '12 at 14:57
yes @eggyal Thanks for pointing this out, this is actually a sample code what Im actually looking for is how to get the pop up message after the record has been submitted — dames, Jul 02 '12 at 15:06

score 1 · Answer 1 · answered Jul 02 '12 at 15:03

What you are looking for has nothing to do with PHP, as it is client side...

There are 2 ways to do this:

after you submit render the popup and remove it after x time with javascript...
submit the form with ajax (javascript) and parse the result, and add popup in javascript.

codingbiz · Accepted Answer · 2012-07-02T18:28:37.410

1

Try the following. You can also enhance it.

On your form page add the css for popup

//adduser.php
#popup {
    visibility: hidden; 
    background-color: red; 
    position: absolute;
    top: 10px;
    z-index: 100; 
    height: 100px;
    width: 300px
}

and your Popup div

//still adduser.php
<div id="popup">
    Record added successfully
</div>

Output this with PHP after success

//still adduser.php - probably at the bottom of the page
<?php
    $recordAdded = false;

    if(isset($_GET['status'] && $_GET['status'] == 1)
       $recordAdded = true;

    if($recordAdded)
    {
     echo '
       <script type="text/javascript">
         function hideMsg()
         {
            document.getElementById("popup").style.visibility = "hidden";
         }

         document.getElementById("popup").style.visibility = "visible";
         window.setTimeout("hideMsg()", 2000);
       </script>';
    }
?>

The script unhide the popup to show the message and then hides it after 2 seconds

You can enhance the animation with jQuery and the div with CSS

UPDATE:

This assumes you will change your .html that contains the form file to .php

//insert.php
if (!mysql_query($sql,$con))
{
  //die('Error: ' . mysql_error());
}
else
{
  // 1 record added
  //if number of rows affected > 0
  header("Location: backtoform.php?status=1"); //redirects back to form with status=1
}

Also try out the suggested jQuery/Ajax method mentioned in the comments

edited Jul 02 '12 at 18:28

answered Jul 02 '12 at 15:18

codingbiz

26,179
8
59
96

Thank you @tcoder but where would i put the div, in the html file? and where would i put the script in the PHP file? I am a bit of a newbie so your help is greatly appreciated – dames Jul 02 '12 at 15:29
It will be where you want to show your notification. Since you are using html page, which makes this answer invalid, I think Ajax would be the case. If it's a php page, a redirection back to this page (where form is contained) with success/failure status is what I do. You can now use the status to show notification. AJAX is better – codingbiz Jul 02 '12 at 15:38
So in what case would I apply the first answer given by you – dames Jul 02 '12 at 16:51
Your `die` error handling mechanism won't help Ajax as Ajax requires you returning status information which you can check to know what to display to the user. Google about `$.post and $.ajax` for jQuery. If you want to stick with php, then change your `.html` page to `.php` and redirect to it with `?status=1` in the querystring. Then if `$_GET['status'] = 1` then use the provided solution to display popup. – codingbiz Jul 02 '12 at 17:15
Ok thanks sounds like alot.I will stick with changing the html to php. Honestly I dont know the first step in implementing it, but i guess ill play around and hope somethng works – dames Jul 02 '12 at 17:39

Display popup message after record has been added to mysql database using html form

2 Answers2