Putting notification into PHP form instead of on page

Question

I am new to web development, and I tried to create a mini PHP site. I want make a form with two buttons, and when the user clicks "Submit", the application is to put entered text into a MySQL database. This is working fine.

The problem: When I click "Submit", it shows me a page with the result of the insert (like "added successfully"). I want to show the message like a notification, or just under the form.

This is the current form: ![](http://i57.tinypic.com/214to37.png

This is what currently happens: ![](http://i62.tinypic.com/opa82q.png

This is what I want to have happen: ![](http://i57.tinypic.com/157c8p4.png

Here is the code for the entire page:

<html>
    <head>
        <style type="text/css">
            html, body, h1, form, fieldset, legend, ol, li {
                margin: 0;
                padding: 0;
            }
            body {
                background: url(image/test.jpg);
                color: #111111;
                font-family: Helvetica;
                padding: 150px;
                font-size: 12px
            }

            input:not([type=checkbox]), textarea {
                width: 300px;
                padding: 3px;
                border: 2px solid #ccc;
                -moz-border-radius: 5px;
                -webkit-border-radius: 1px;
            }


            form {
                width: 400px;
                margin: 0 auto 0 auto;

            }

            form fieldset {
                padding: 26px;
                border: 1px solid #b4b4b4;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            }

            form legend {
                padding: 5px 20px 5px 20px;
                color: #030303;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                border: 1px solid #b4b4b4;
            }

            form ol {
                list-style: none;
                margin-bottom: 20px;
                border: 1px solid #b4b4b4;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                padding: 10px;
            }

            form ol, form legend, form fieldset {
                background-image: -moz-linear-gradient(top, #f7f7f7, #e5e5e5); /* FF3.6 */
                background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #f7f7f7)); /* Saf4+, Chrome */
            }

            form ol.buttons {
                overflow: auto;
            }

            form ol li label {
                float: left;
                width: 160px;
                font-weight: bold;

            }

            label.info {
                position: absolute;
                color: #000;
                top:0px;
                left: 50px;
                line-height: 15px;
                width: 200px;
            }


            form ol.buttons li {
                float: left;
                width: 150px;
            }

            input[type=submit] {
                width: 120px;
                color: #f3f3f3;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                background-image: -moz-linear-gradient(top, #0cb114, #07580b); /* FF3.6 */
                background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #07580b),color-stop(1, #0cb114)); /* Saf4+, Chrome */
                -webkit-box-shadow: #4b4b4b 0px 2px 5px;
                -moz-box-shadow: #4e4e4e 0px 2px 5px;
                box-shadow: #e3e3e3 0px 2px 5px;
                border: none;
            }
            input[type=reset] {
                width: 80px;
                color: #f3f3f3;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                background-image: -moz-linear-gradient(top, #d01111, #7e0c0c); /* FF3.6 */
                background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7e0c0c),color-stop(1, #d01111)); /* Saf4+, Chrome */
                -webkit-box-shadow: #4b4b4b 0px 2px 5px;
                -moz-box-shadow: #4e4e4e 0px 2px 5px;
                box-shadow: #e3e3e3 0px 2px 5px;
                border: none;

            }
        </style>
        <title>Add New Channel</title>
    </head>
    <body>
        <?php
        if (isset($_POST['add'])) {
            $dbhost = 'localhost';
            $dbuser = 'root';
            $dbpass = '';
            $conn = mysql_connect($dbhost, $dbuser, $dbpass);
            if (!$conn) {
                die('Could not connect: ' . mysql_error());
            }

            if (!get_magic_quotes_gpc()) {
                $channel_name = addslashes($_POST['channel_name']);
                $channel_url = addslashes($_POST['channel_url']);
            } else {
                $channel_name = $_POST['channel_name'];
                $channel_url = $_POST['channel_url'];
            }

            $sql = "INSERT INTO channel " .
                    "(channel_name,channel_url) " .
                    "VALUES('$channel_name','$channel_url')";
            mysql_select_db('test');
            $retval = mysql_query($sql, $conn);
            if (!$retval) {
                die('Could not enter data: ' . mysql_error());
            }
            echo "Entered data successfully\n";
            mysql_close($conn);
        } else {
            ?>
            <form method="post"  action="<?php $_PHP_SELF ?>">
                <fieldset>
                    <legend>Add Channel</legend>
                    <ol>
                        <li><label for="field1">Channel Name</label></li>
                        <li><input type="text" id="channel_name" name="channel_name" required/></li>
                    </ol>
                    <ol>

                        <li><label for="field2">Channel URL</label></li>
                        <li><input type="text" id="channel_url" name="channel_url" required/></li>
                    </ol>
                    <ol class="buttons">
                        <li><input name="add" type="submit" class="button" id="add" value="Add Channel" />     </li>
                        <li><input type="reset" class="button" value="Reset" /></li>
                    </ol>
                </fieldset>
            </form>
    <?php
}
?>
    </body>    
</html>

wesolyromek · Accepted Answer · 2014-02-23 17:54:09Z

1

Display the form without the condition. Remove the if-else and move the database logic after the form is displayed, but before it is closed.

<form action="" method="POST">
    <fieldset>
        --display the form as usual in here--
    </fieldset>

<?php
    if(isset($_POST['add'])) {
        //add contents to database 
        echo 'Entered data successfuly';
    }
?>

</form>

edited Feb 23, 2014 at 17:54

answered Feb 23, 2014 at 17:48

wesolyromek

6501 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tirolel Over a year ago

well thank you for the explanation and I just did it as u explained, but is it different to have php code out of the form or it must be there?

wesolyromek Over a year ago

Actually you can put the code anywhere. You can just leave the php section displaying 'Entered data successfully' if the isset condition is true inside the form. It's up to you, but I find it better to have everything in one place (you can also display error messages here if something goes wrong with the db). Just remember that you have to echo the output where, you want it to be (before closing the form tag).

user3316397 · Accepted Answer · 2014-02-23 17:44:12Z

0

You need to submit the form with jquery/ajax. A simple search will get you where you want.

answered Feb 23, 2014 at 17:44

user3316397

833 bronze badges

Comments

clexmond · Accepted Answer · 2014-02-23 17:44:22Z

0

There are a few options to accomplish that:

Instead of having the form target a different url for the POST, target the same page. Have the single page handle both the GET and the POST and just append "Entered data successfully" onto your view.
Utilize a POST via AJAX and listen for a successful response from the script handling saving to the database. On success use Javascript to append your notification at the bottom of the form.

answered Feb 23, 2014 at 17:44

clexmond

1,55913 silver badges21 bronze badges

Comments

Shahar · Accepted Answer · 2014-02-23 17:44:30Z

0

Just add a plain div at that spot and when the AJAX returns success add the text to that div. You would need to show more code if you want to help us specifically.

answered Feb 23, 2014 at 17:44

Shahar

1,6772 gold badges12 silver badges18 bronze badges

Collectives™ on Stack Overflow

Putting notification into PHP form instead of on page

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related