How can I save information from forms?

Question

Here is my code in jsfiddle: http://jsfiddle.net/MppxX/

If you find your way through by clicking the first "yes" or the first image on the left within the DIV tag, you will come across the form in which I am speaking about.

Now, after the user inputs information (I will include a 'submit' button later), how can I 'save' that information? I will need that information for 2 purposes:

1) to create a reminder with said information

2) will make a separate area for "list of reminders" and will display those saved reminders

THANKS

$(document).ready(function() {
                            $(".appIMG1").click(function() {
                                $("#app1").animate({
                                    left: '250px',
                                    opacity: 0
                                });
                                $("#app2").fadeIn("slow");
                            });
                        });
    
        $(document).ready(function() {
                            $(".appIMG2").one('click.appIMG2', function() {
                                $('.appIMG1, .appIMG2').unbind('click');
                                $('#app1').animate({
                                    top: "0px",
                                    opacity: 0
                                });
                                $("#app3").fadeIn("slow");
                            });
                        });

#app1{
                            position:absolute;
                            width:250px;
                            height:250px;
                            z-index:1;
                            top:50%;
                            left:50%;
                            margin:-150px 0 0 -150px;
                            background:white;
                            box-shadow: 0 0 1px 1px #888888;
                            text-align:center
                        }
            
                        #app2{
                            position:absolute;
                            width:300px;
                            height:300px;
                            z-index:0;
                            top:50%;
                            left:50%;
                            margin:-150px 0 0 -150px;
                            background:white;
                            box-shadow: 0 0 1px 1px #888888;
                            text-align:center;
                        }
            
                        #app3{
                            position:absolute;
                            width:300px;
                            height:250px;
                            z-index:8;
                            top:50%;
                            left:50%;
                            margin:-150px 0 0 -150px;
                            background:white;
                            box-shadow: 0 0 1px 1px #888888;
                            text-align:center;
                        }
            
                        img.appIMG1{
                            -webkit-box-shadow: 0 0 1px 1px #888888;
                            box-shadow:0 0 1px 1px #888888;
                        }
            
                        img.appIMG2{
                            -webkit-box-shadow: 0 0 1px 1px #888888;
                            box-shadow:0 0 1px 1px #888888;
                        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div id="app1">
                <p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
                <br>
                <img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8%>
                <img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
            </div>
    
            <div id="app2" style="display:none">
                <form>
                    Name for the reminder: <input type="text" name="firstname"><br>
                    On what days would you like to be reminded on: <br>
                    <input type="checkbox" name="day" value="Monday">Monday<br>
                    <input type="checkbox" name="day" value="Tuesday">Tuesday<br>
                    <input type="checkbox" name="day" value="Wednesday">Wednesday<br>
                    <input type="checkbox" name="day" value="Thursday">Thursday<br>
                    <input type="checkbox" name="day" value="Friday">Friday<br>
                    <input type="checkbox" name="day" value="Saturday">Saturday<br>
                    <input type="checkbox" name="day" value="Sunday">Sunday<br>
                </form>
            </div>
    
            <div id="app3" style="display:none">
                <p><b><u><font face="TimeBurner" color="66d9ff" size="6">Do you want to check your current reminders?</b></u></font></p>
                <img class="appIMG1" alt="YES" border="0" src="YES.png" align="left" hspace=1.8%>
                <img class="appIMG2" alt="NO" border="0" src="NO.png" align="right" hspace=2%>
            </div>
    

Answer 1

You could save it to a csv file that you could download and consult on your local system if you don't want to use MySQL and want the data to be local.

Put all your POST values together with a comma between each of them and append them to a file. Make

$_POST['firstname'] . ',' . $_POST['day'] . ','; 

and append that to a file e.g. mydata.csv which you can then download.

You can also read and "explode" (see php.net) each row of the file into an array and process that to set your reminders.

As per other comments tutorials are very valuable - especially with regard to sanitising text input, which is vital to prevent inject attacks.

Answer 2

in order to save information input from forms with php you really have two options. and those options will be depending on specifically how you need to deal with this information.

the first group of 'simple' options consist of php session variables

$_SESSION['...']

While session variables are stored on the server they are specific only to one user typically within one visit, these variables will lose their information as that users "session" on the website expires orwhen you close it with your php scripts

<?php
     setcookie("user", "Alex Porter", time()+3600);
?>

another option is browser cookies which can be defined using php or javascript. their information is stored locally on the user's browser. they CAN be configured with longer custom expiration but you also run the risk of the user clearing them or not allowing them and interrupting your intended process.

it should be mentioned with each of these first two options, you as the "SITE OWNER" initially have no access to this information without doing any further custom scripting

---

the third option previously mentioned is storing this information into a database. the typical and to my knowledge most commonly used and most widely documented database system is MYSQL. php has very good pre-built functionality to allow your scripts to connect to a web database in order to INSERT UPDATE SELECT and DELETE data from within it.

it should be noted that mysql will require additional knowledge and other systems in place. Working with mysql will require access to a mysql server - MOST hosting solutions that provide PHP are run from what the industry calls a "LAMP" stack. LAMP standing for Linux Apache MySQL PHP - a very common web server configuration.

additionally once you have access to a mysql server - you will also have build the schema for a database to store this information. meaning you define the "table" structure of a database that will accept your information - a very common tool for doing this is PHPMYADMIN and is also frequently found on the majority of LAMP hosting solutions offered by the majority of web hosting companies such as GoDaddy.

this all being said - relational database solutions are persistent meaning that they will store data indefinitely (until you decide to delete it or something breaks which rarely happens)

the typical process would be a user submits your form, that form contains an action of a php script

<form action="handler.php" method="POST">
<!-- some form inputs and submits go here -->
</form>

this handler.php script will process the input data - then connect to the database server and perform the desired action. whether that be INPUT data for a user to signup or search for information in the database and output the results via a SELECT command.

if you want to go the MYSQL route with no prerequisite knowledgei recommend starting here at this very thorough, very free tutorial series. on youtube. here bucky goes through all of these processes including acquiring a free mysql server, which will help greatly with the learning process but will probably not be ideal for live applications / development.

sorry for writing a book, hope this helps!