How to store the state of an input on a website?

Question

I created a webUI to control a relay board with a raspberry pi.

When a button is pressed I access the relais.php with an AJAX request. The relais.php sends the corresponding commands to a python script from where the relays are controlled.

<!DOCTYPE html>
<html>
<body>
  <label class="switch">
  <input type="checkbox" id="IN1" onclick="in1()">
  </label>
</body>

<script>
  function in1() {
    var x = document.getElementById("IN1").checked;
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "relais.php?dir=IN1=" + x, true);
    xhttp.send();
    var out1 = x; }
</script>
</html>

The problem is the page gets reloaded the buttons are reset to the "unchecked" state. How could I store the states of the inputs on the webserver? The result would be that I could access the webUI from another device and the buttons would be "remembered" every time I reload.

Get Off My Lawn · Answer 1 · 2016-11-22T23:59:21.103

1

There are two ways to keep consistency across pages (that I can think of off the top of my head).

You need to store the state in a database and/or in a server session.
Otherwise you can store it within a cookie, and get the cookie contents, but cookies can be deleted and edited, so it might not be the best solution.

Example PHP:

<?php

// Set the header
header("Content-Type: text/json");

/* 
 * Create a Mysql connection with PDO
 * http://php.net/manual/en/pdo.construct.php 
 */

// Prepare a query
$sth = $dbh->prepare("select col1, col2, col3 from fruit where user_id = ? limit 1");

// Execute the query, and replace the `?` with the value of `$_GET['key']`
$sth->execute([$_GET['key']]);

// Get the row
$reslut = $sth->fetch();

// print the result to the page
echo json_encode($reslut);

Example jQuery ajax:

// Make a request to the php file with the key `123456`.
// This could be a user id, hash or whatever you want it to be
// as long as it is in the database.
// this example is using it as a user id.
$.get('/path/to/phpfile.php?key=123456', result => {
    console.log(result);
});

edited Nov 22 '16 at 23:59

answered Nov 22 '16 at 22:20

Get Off My Lawn

34,175
38
176
338

OP mentions the state persisting across multiple devices, ruling out cookies and sessions. – Patrick Q Nov 22 '16 at 22:20
It wouldn't rule out database and session like mentioned in my first option. – Get Off My Lawn Nov 22 '16 at 22:22
Ok. Can i do a request to a database directly in Javascript or do i need to use php? (I know that JS is client-sided but is there a way of doing it in JS?) – 0fd69cd8ff23 Nov 22 '16 at 23:35
You can make an ajax request, and the server code, `php`, `python`, or whatever server language you are using can then return json that your javascript can then handle. – Get Off My Lawn Nov 22 '16 at 23:36
Are there examples of such case of use where i could get more information. I just fount [this](http://www.w3schools.com/php/php_mysql_intro.asp) but it should be doable. – 0fd69cd8ff23 Nov 22 '16 at 23:47
@nudelkopf I have created an example – Get Off My Lawn Nov 23 '16 at 00:03

score 1 · Answer 2 · edited May 23 '17 at 12:13

Q: How could i make the webbrowser know which buttons are in the "checked" state and which are "unchecked" every time i load the website?

A: If you want to "save state" with respect to a particular web browser, use cookies.

If you just want to "save state", you'll need some kind of "database" on the Web/PHP server.

MySQL is a good choice, but in your case ANYTHING would work: including something like a MongoDB noSQL database, or even a simple text file.

Personally, I would prefer a sever-side solution. But here's an example that uses jQuery and cookies - completely browser-side:

jQuery Toggle with Cookie

How to store the state of an input on a website?

2 Answers2

Example PHP:

Example jQuery ajax: