Store and Recall HTML Form Data, I'd like to know a simple way to do so. Options

[lordelliott]

Hi,

I've spent hours and hours searching Google for an answer, but none of the tutorials I've found work, are understandable, or cover enough for what I'm trying to do.


This is what I want a page to do:
1. Allow a user to enter data via HTML form code.
I actually think I've got this part, almost.

2. Save that data to ANY kind of WHATEVER.
One thing that has confused me is that there seems to be SO MANY options! XML, ACCESS, PHP, Perl, Javascript, cookies, etc, etc, etc... I really don't care what I use as long as it's simple. Ideally it would be stored local to the user cause I don't have web space (know of good free hosting?), but if I have to get server to make it work, whatever.

3. Recall the saved user data and use it to pre-fill the form fields.
The user should see whatever they entered last time already sitting the the form. The user should then be able to change what's entered and resubmit to change the data in the save file.


Hopefully this is a good place in the forum to post this, but if it should be somewhere else, I apologize and ask to be told where it should go.
Thanks for reading.

[Christian J]

How much data is it? A single word or two, or larger text sections?

Who should be allowed to see the data? The user himself, the site owner or anybody visiting the page?

Does it have to work for all users, including those with slightly older browsers, or those that disable things like javascript or cookies?

[lordelliott]

How much data is it? A single word or two, or larger text sections?

Who should be allowed to see the data? The user himself, the site owner or anybody visiting the page?

Does it have to work for all users, including those with slightly older browsers, or those that disable things like javascript or cookies?

It's many data sets that consist of 3 values (I think that's the right terminology.) which are 1 check box, 1 one number field, and 1 text field. The number field would not likely be over 9,000 (it's price data) and the text field would be values such as "1st", "2nd", "3rd", etc. So it's lots of small data, if I'm saying that right.

Only the each individual user should get the see their own data.

It doesn't have to work for everyone. If they don't like javascript or cookies, tough. Not that there's anything wrong with that, it's just not that kind of thing.


I was thinking of just distributing the whole thing as a download so people could just use the HTML web page local on their computer as a more convenient interface than say Access, which not everyone has. I will need to update it from time to time tough, so a hosted webpage that I can just edit the code of would be better.

[Christian J]

So it's lots of small data, if I'm saying that right.

Maybe you could store it in a cookie then. If it exceeds the storage limit of cookies there's also a new similar thing called localStorage, which can store MB's of data in newer browsers that support it.

Only the each individual user should get the see their own data.

You could also store a limited amount of data in a URL querystring, but then other's may find it. Or you could store the data on the server (usually in a database), but then you'd also need some kind of authentication to prevent others from seeing it.

If they don't like javascript or cookies, tough. Not that there's anything wrong with that, it's just not that kind of thing.

Just make sure to check what the user has enabled/supported, and offer suitable feedback/fallback.

[lordelliott]

If it exceeds the storage limit of cookies there's also a new similar thing called localStorage, which can store MB's of data in newer browsers that support it.

I must have looked at 50 pages on this DOM storage thing, but I just don't get it. I know plenty about it now, but not how to use it in any way. All I know is basic HTML and a little about CSS. I'd need a step by baby step tutorial to figure this out. Should I buy a book on HTML5?

Here's an example, if anyone wants to walk me through this:

CODE

<html>
<body>

        <form>
            Checkbox <input type="checkbox"><br>
            Textbox <input type="text" size="6"><br>
            Drop-down <select size="1">
                <option value="1"> </option>
                <option value="2">1st</option>
                <option value="3">2nd</option></select>
        </form>
        
</body>
</html>

What's the first thing I need to do to that?

[Brian Chandler]

Where does all this information come from? Is each user going to type in 9000?? sets of data? Or what?

It sound as though it would be simpler to have a database application showing the data (it is all the same "shape", right?), and mark each row of your table with the user/owner.

Or whatever: in any event you are trying to do some sort of programming task, so you will either need to learn about programming, or get someone else to do it for you (but in that case you will need to be able to give very clear instructions on what you need done).

[lordelliott]

Where does all this information come from? Is each user going to type in 9000?? sets of data? Or what?

It sound as though it would be simpler to have a database application showing the data (it is all the same "shape", right?), and mark each row of your table with the user/owner.

Or whatever: in any event you are trying to do some sort of programming task, so you will either need to learn about programming, or get someone else to do it for you (but in that case you will need to be able to give very clear instructions on what you need done).

You obviously missed the "over 9,000!" joke, and it wasn't 9,000 sets. I was just saying that the value of that field would never be a big number. The data would be different for each user, so naturally they should enter it. The idea was to create an application to track collectibles, and everyone would have a different collection, so...

I think you mean one database for everyone? Based on what I said above, you should see how that would be less practical. I'm open to any suggestions though.

I'm fine with learning to program. I've worked with VBA before, but I'm just a novice of the lowest level. I did get a graduate degree though, so I can't be that dumb. Anyway, I just don't know where to start yet. This localstorage thing seems the way to go, and that uses Javascript right? Or is it HTML5? So I should try to learn one of those or what? Or maybe I should just find someone to do it for me. :\


I played with the source code on the page Christian J linked, but only succeeded in screwing up my browsers. They keep remembering the page, even when I've cleared the cache and everything and rebooted. All I wanted was to save data between sessions without an expire date (like cookies have). One would think such a simple request wouldn't be so complicated in the year 2013.

[Frederiek]

I doubt you would need a db for each user. That would be insane.

I'm not very in to this kind of thing, but local storage uses a combination of HTML5 and the DOM.
Have a look here: http://diveintohtml5.info/storage.html

[lordelliott]

For anyone reading this with an interest in the using the DOM/localstorage for something similar, I got pretty far by adapting this example:
http://www.simonbingham.me.uk/index.cfm/ma...st-form-data-47

However, when I tried to apply it to my stuff, even after some tweaking and experimenting, it didn't work. So, now I'm going to look into making a database on a server to handle the task. I got some free hosting that supports MySQL, so that's what I'm investigating next. I realized that would be more permanent anyway. Thoughts on MySQL?

[Brian Chandler]

First a thought on this "local storage" thing (from the page you cited): is this really true:

This means that the data stored in Local Storage is still there even if a user closes their browser, deletes their cookies or turns off their machine/device.

Leaving the user powerless to delete it, or what? If so, disabling local storage will be the new hot topic as soon as the Dark Side latches on to it.

I can't see why you can't just use a cookie, but I still don't understand what information you want each user to keep. Can you show us some sort of example? (Otherwise it's even harder to advise how you would use MySQL to store it.)

[Christian J]

First a thought on this "local storage" thing (from the page you cited): is this really true:

This means that the data stored in Local Storage is still there even if a user closes their browser, deletes their cookies or turns off their machine/device.

Yes, that's the point with it.

Leaving the user powerless to delete it, or what?

At least Opera 12 lets you delete it (Preferences > Advanced > Storage), but it can't be disabled in advance (not in that menu, at least). The other browsers offer even less control, AFAIK.

If so, disabling local storage will be the new hot topic

Seems to me nobody cares about these things anymore, so I'm a bit pessimistic.

as soon as the Dark Side latches on to it.

Not sure what harm this particular "feature" can be used for, though. All data that can be saved this way can be sent to a web server too. The main advantage for site owners (read: ad networks) is that they pass the cost of storage on to the client.

BTW here are some other things that are hard to get rid of: http://samy.pl/evercookie/

[lordelliott]

Leaving the user powerless to delete it, or what?

I've found some conflicting statements on that, but it's my understanding that you can get rid of it by clearing your cache. However, like I mentioned previously, while I was messing with it on my on my local system (and I read that only works with firefox and chrome, which seems to be true) I managed to get it stuck to the point where not even clearing the cache worked. I don't really want to get into discussing all that though. I plan on reformatting soon anyway.

Can you show us some sort of example? (Otherwise it's even harder to advise how you would use MySQL to store it.)

Here's a mock up of part of the site. To view the code, just view page source. It's too long to post here.
https://dl.dropboxusercontent.com/u/9038732...ple1_MySQL.html


I figured I'd need a login page to identify users for the database, so I followed this example:
Part 1 - http://www.youtube.com/watch?v=-VB3qbYYZ54
Part 2 - http://www.youtube.com/watch?v=nbbGZT5_FSg

And made these two pages:

CODE

<html>
<body>

    <form action="login.php?login=yes" method="post">
        Username: <input type="text" name="username">
        <br>
        Password: <input type="password" name="password">
        <br>
        <input type="submit" value="Login">
    </form>

</body>
</html>

CODE

<?php

    $username = $_POST['username'];
    $password = $_POST['password'];
    $login = $_GET['login'];
    
    setcookie("username","$username",time()+86400);
    
    if($login=='yes') {
    
        $con = mysql_connect("mysql.serversfree.com","myusername_main","mypassword");
        
        mysql_select_db("login") or die(mysql_error());
        
        $get = mysql_query("SELECT count(id) FROM login WHERE user='username' and pass='password'");
        
        $result = mysql_result($get, 0);
        
        if($result!=1) {
            echo "Invalid login.";
        } else {
            echo "Login Successful. Welcom back " . $_COOKIE['username'] . " awesome.";
            $_SESSION['username'] = $username;
        }
    
    }

?>

("myusername" and "mypassword" are what I replaced the real values with for this post.)

The login thing almost worked, but I got the following errors:

Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/myusername/public_html/login.php on line 17 No database selected

Adding " or die(mysql_error())" came up with the following error message:

Access denied for user 'myusername_main'@'10.1.2.7' to database 'login'

I think it didn't work cause I don't have access to the localhost or root? I sent a ticket about it to serversfree.com, but I'm not too hopeful.

[lordelliott]

Seems to me nobody cares about these things anymore, so I'm a bit pessimistic.

I care, and was planing to look for a Firefox add-on or something to clear it out or manage it. I haven't gotten around to it, but if I find anything I'll go ahead and post it here.

[Brian Chandler]

CODE

<html>
<body>

    <form action="login.php?login=yes" method="post">
        Username: <input type="text" name="username">
        <br>
        Password: <input type="password" name="password">
        <br>
        <input type="submit" value="Login">
    </form>

</body>
</html>

Well, that's a form OK. (What on earth is the "login=yes" for? Is there any other case?)

CODE

<?php

    $username = $_POST['username'];
    $password = $_POST['password'];
    $login = $_GET['login'];
    
    setcookie("username","$username",time()+86400);
    
    if($login=='yes') {
    
        $con = mysql_connect("mysql.serversfree.com","myusername_main","mypassword");
        
        mysql_select_db("login") or die(mysql_error());
        
        $get = mysql_query("SELECT count(id) FROM login WHERE user='username' and pass='password'");
        
        $result = mysql_result($get, 0);
        
        if($result!=1) {
            echo "Invalid login.";
        } else {
            echo "Login Successful. Welcom back " . $_COOKIE['username'] . " awesome.";
            $_SESSION['username'] = $username;
        }
    
    }

?>

("myusername" and "mypassword" are what I replaced the real values with for this post.)

The login thing almost worked, but I got the following errors:

What is "almost worked"? Have you created the database and a table called login? You normally only need one database for a project, including several tables: you presumably need one for the items in the catalog (who is going to create this?), one for the users/logins, and one for the "acquisitions" (which users hold which items.

Since you are using a magic ("free") server, I suppose you have thought about how you are going to back this all up? Or will you just dump your users when there's a problem?

[lordelliott]

Well, that's a form OK. (What on earth is the "login=yes" for? Is there any other case?)

I have no idea. I was just following the tutorial. I thought it was kind of stupid, too.

What is "almost worked"? Have you created the database and a table called login? You normally only need one database for a project, including several tables: you presumably need one for the items in the catalog (who is going to create this?), one for the users/logins, and one for the "acquisitions" (which users hold which items.

Almost, as in it seemed like the only error left was not being able to access the database for whatever reason. I created a "login" table in the database, and I am creating the catalog database? I guess I should have included my idea for the layout of that. I'll make that now.

And here it is:
https://dl.dropboxusercontent.com/u/9038732...es/Untitled.jpg

I was thinking I'd only need a login table and the above. I filled that table with made up sample data to hopfully illustrate it's function, but I will now explain each column.

1. userid = User ID
   Let's pretend you're using my site. This is your ID, which will just be a number counting up from 1 for each user. User 1, 2, 3, etc.
2. type = Type
   This specifies the comic book series, since the comic I'm basing this on has a regular series and a micro series.
3. issuenum = Issue Number
   The issue number, clearly.
4. subtpye = Sub Type
   This is to differentiate between the regular comic cover variants and store exclusive variants.
5. cover = Cover
   This is for the name of the particular comic cover variant, such as regular cover variant A, B, C, etc. or a store exclusive from Larry's, Midtown, Jet Pack, etc.
6. ownershipstate = Ownership State
   This is to mark whether you in particular own a comic variant.
7. purchaseprice = Purchase Price
   This is to record the price you paid for it, if you remember, so that if you ever sell it you can see how much it appreciated in value.
8. printednum = Print Edition Number
   This is to record, if you know, whether you own a 1st, 2nd, 3rd, etc printing of the comic.

I know this may not be the perfect list of table headings, but it's what I've come up with so far. Explaining it now has already given me ideas for improvement.

Since you are using a magic ("free") server, I suppose you have thought about how you are going to back this all up? Or will you just dump your users when there's a problem?

Well I wasn't necessarily planing on keeping that server. I was just using it to figure this all out before committing to pay for hosting. This is a nonprofit endeavour which will offer the free service of conveniently listing all of the comics in a particular series (which I am declining to give the name of) and tracking the collection of anyone who wishes to register. Being free, I wouldn't expect people to necessarily expect a backup. However, that would just be mean, so of course I'm going to back it up. Funny enough, this particular free server has backup options.

I am considering switching to GoDaddy, since they're offering a $3 a month deal.
http://www.godaddy.com/hosting/web-hosting.aspx

But like I said, I'm not expecting to make any money off of this, so I didn't want to put any money out unless I really have too.

[Christian J]

Seems to me nobody cares about these things anymore, so I'm a bit pessimistic.

I was thinking of the users themselves caring. If they don't put any pressure on browser vendors things will not improve.

I care, and was planing to look for a Firefox add-on or something to clear it out or manage it. I haven't gotten around to it, but if I find anything I'll go ahead and post it here.

There's a bookmarklet here: http://potch.me/ls/ but unfortunately it only works for the current URL (in case you want to empty your browser completely).

[Brian Chandler]

Well, that's a form OK. (What on earth is the "login=yes" for? Is there any other case?)

I have no idea. I was just following the tutorial. I thought it was kind of stupid, too.

What is "almost worked"? Have you created the database and a table called login? You normally only need one database for a project, including several tables: you presumably need one for the items in the catalog (who is going to create this?), one for the users/logins, and one for the "acquisitions" (which users hold which items.

Almost, as in it seemed like the only error left was not being able to access the database for whatever reason. I created a "login" table in the database, and I am creating the catalog database? I guess I should have included my idea for the layout of that. I'll make that now.

And here it is:
https://dl.dropboxusercontent.com/u/9038732...es/Untitled.jpg

I was thinking I'd only need a login table and the above. I filled that table with made up sample data to hopfully illustrate it's function, but I will now explain each column.

1. userid = User ID
   Let's pretend you're using my site. This is your ID, which will just be a number counting up from 1 for each user. User 1, 2, 3, etc.
2. type = Type
   This specifies the comic book series, since the comic I'm basing this on has a regular series and a micro series.
3. issuenum = Issue Number
   The issue number, clearly.
4. subtpye = Sub Type
   This is to differentiate between the regular comic cover variants and store exclusive variants.
5. cover = Cover
   This is for the name of the particular comic cover variant, such as regular cover variant A, B, C, etc. or a store exclusive from Larry's, Midtown, Jet Pack, etc.
6. ownershipstate = Ownership State
   This is to mark whether you in particular own a comic variant.
7. purchaseprice = Purchase Price
   This is to record the price you paid for it, if you remember, so that if you ever sell it you can see how much it appreciated in value.
8. printednum = Print Edition Number
   This is to record, if you know, whether you own a 1st, 2nd, 3rd, etc printing of the comic.

I know this may not be the perfect list of table headings, but it's what I've come up with so far. Explaining it now has already given me ideas for improvement.

Hmm. You are conflating two things: the list of items, and the list of relationships -- who owns what. This is not a good idea. I still don't understand where the items actually come from, but if all you are doing is letting users type in a list of their own property, it really is hard to see the point. If you start with a catalog of items, then you need a separate ("ownership") table to link users to items they own: in the simplest case with just two columns: user-id and item-id. Then some of the values in your list (like 'price paid') do belong to the "ownership" table rather than the "item" table.

(By backup, I meant you need to keep a copy of something in your own hands, because you cannot really trust anyone who claims to be a business but is just doing stuff as a favour.)