0

Is it be possible to build a pure Html page (no php, no asp, no server-side) with a form that, though javascript only, will preserve its selected checkbox upon submission?

More specifically, I need to build a table that updates itself in realtime (as excel does with formula calculations) when some checkboxes are clicked. I cannot find a way to store a checkbox's state because on every page refresh (form submission action) the javascript variables will be reset.

Leigh
  • 28,765
  • 10
  • 55
  • 103
alzambo
  • 147
  • 5
  • 19
  • 5
    Read about LocalStorage or Cookies. – Salketer Aug 08 '13 at 15:36
  • Why do you want to have a FORM that doesn't POST any information to a server-side function that will do something (e.g. save, manipulate, process, etc)? You could probably make something client-side only by using cookies or local storage, but it wouldn't be a very robust application without having anything running on the server as well. That's the whole point of web apps. – theyetiman Aug 08 '13 at 15:40
  • Why not just: not refresh the page, use AJAX to send/receive data from server and apply appropriate changes with javascript – VitaliyG Aug 08 '13 at 15:51
  • About off-topic: maybe my question isn't enough clear: I'm not looking for code but only for a "direction" to take and, before taking it, I need to know if it's practicable or if there are limits..Anyway thank you to everyone for many answers and suggestions.. very precious! – alzambo Aug 09 '13 at 06:55

3 Answers3

3

Taken from my answer here

The supposed answer to your solution is localStorage()...

It's Javascript dependent and definitely not a perfect solution, but HTML5 localStorage allows you to store preferences on your users' computers.

First, detect support for localStorage():

if (Modernizr.localstorage) { // with Modernizr
if (typeof(localStorage) != 'undefined' ) { // Without Modernizr

Then set a parameter if it's supported:

localStorage.setItem("somePreference", "Some Value");

And then later retrieve it, as long as your user hasn't cleared local storage out:

var somePreference = localStorage.getItem("somePreference");

When you want to clear it, just use:

localStorage.removeItem("somePreference");

For those using unsupported (older) browsers, you can use [local storage hacks][2] abusing Flash LSOs, but those are definitely not ideal.

What about sessions or cookies?

Both of these are intentionally temporary forms of storage. Even Flash LSOs are better than cookies for long-term storage.

Community
  • 1
  • 1
Glitch Desire
  • 14,632
  • 7
  • 43
  • 55
0

You have multiple options open to you

You store things locally within the browser. If the user clears their cache and local storage, everything is gone.

  • JavaScript Cookies

You can't use sessions as these are server-side. You can, however, use cookies to store / retrieve data from. See here.

  • Hack everything into the URL

You can alter the URL using HTML5's push state event. You would append parameters "GET request style" on every event you require a change to.

<script type="text/javascript">
    var stateObj = { foo: "bar" };
    function change_my_url()
    {
        history.pushState(stateObj, "page 2", "bar.html");
    }
    var link = node.getElementByID('click');
    link.addEventListener('click', change_my_url, false);
</script>

<a href="#" id='click'>Click to change url to bar.html</a>

Personally, I'd use the HTML5 local storage. But remember - you can't rely on your users having accurate data if they play with the cache. For mission critical stuff, you really should use a server side language (that's what it's for).

Useful links:

Jimbo
  • 25,790
  • 15
  • 86
  • 131
  • If OP specifically state "no server-side" then there is no need to refresh page or submit any form, so there is no need to store data outside of current page and everything can be stored in javascript variables and DOM – VitaliyG Aug 08 '13 at 16:51
  • 2
    And if the user refreshes the page accidentally, everything's gone? I don't think so... I gave multiple valid options. You gave one *invalid* one. We're not revenge down voting here, that's pathetic. We should be offering OP the multiple viable options according to his or her requirements. – Jimbo Aug 08 '13 at 17:31
0

With JavaScript you could just write event handlers for the checkbox 'check' event and therefore not require a form submission.

Libraries like Knockout.JS allow you to update things like tables in 'realtime' based on calculations without requiring a page refresh.

dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89