CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Tirolel
Tirolel

Reputation: 928

Putting notification into PHP form instead of on page

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>

Upvotes: 0

Views: 1412

Answers (4)

wesolyromek
wesolyromek

Reputation: 650

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>

Upvotes: 1

Shahar
Shahar

Reputation: 1677

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.

Upvotes: 0

clexmond
clexmond

Reputation: 1549

There are a few options to accomplish that:

  1. 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.
  2. 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.

Upvotes: 0

user3316397
user3316397

Reputation: 83

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

Upvotes: 0

Related Questions