Switch on/off html, css e js: problema con javascript

[romimmo]

Ciao a tutti. Vorrei inserire un flip switch on/off realizzato in html e css che grazie a Js mi vada ad eseguire il file action.php. Ho testo il file action.php da terminale tramite ./action.php e funziona correttamente ma quando inserisco il codice javascript non funziona. Ecco il codice::
html

<meta name="robots" content="noindex">
<style id="jsbin-css">
            .onoffswitch {
        position: relative; width: 104px;
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
        display: none;
    }
    .onoffswitch-label {
        display: block; overflow: hidden; cursor: pointer;
        border: 2px solid #999999; border-radius: 20px;
    }
    .onoffswitch-inner {
        display: block; width: 200%; margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
        font-size: 13px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
        box-sizing: border-box;
    }
    .onoffswitch-inner:before {
        content: "Acceso";
        padding-left: 5px;
        background-color: #34A7C1; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
        content: "Spento";
        padding-right: 5px;
        background-color: #F50505; color: #FAFAFA;
        text-align: right;
    }
    .onoffswitch-switch {
        display: block; width: 18px; margin: 6px;
        background: #FFFFFF;
        position: absolute; top: 0; bottom: 0;
        right: 70px;
        border: 2px solid #999999; border-radius: 20px;
        transition: all 0.3s ease-in 0s; 
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px; 
    }
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
        <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>

<script id="jsbin-javascript">
$("#myonoffswitch").click(function(){
            if($("#myonoffswitch").is(":checked"))
            {
                $(document).ready(function(){
            var jqxhr = $.getJSON('actionON.php', function(data) {
            value_update(data);
            }
            else
            {
                 $(document).ready(function(){
        var jqxhr = $.getJSON('actionOFF.php', function(data) {
            value_update(data);
            }
        });
</script>

[ciro78]

il document ready deve essere la funzione esterna a tutte.
poi parli di un file action ma punti ad un file actionON.php

[romimmo]

il document ready deve essere la funzione esterna a tutte.
poi parli di un file action ma punti ad un file actionON.php

Hai ragione su actionON, errore di distrazione mio. Comunque ho risolto così:

$("#myonoffswitch").change(function () {
      var isChecked = $("#myonoffswitch").is(":checked") ? 1 : 0;
      if (isChecked) {
          $.ajax({
              url: 'actionON.php',
              type: 'POST',
          });
      } else {
          $.ajax({
              url: 'actionOFF.php',
              type: 'POST',
          });
      }

    });

Ora avrei due domande:
1) Vorrei che lo switch fosse impostato di default quando apro la pagina su OFF mentre ora è su ON
2) Se esco dalla pagina e rientro non mi conserva lo stato precedentemente impostato, c'è una soluzione??

[KillerWorm]

Ciao

1) Vorrei che lo switch fosse impostato di default quando apro la pagina su OFF mentre ora è su ON

Puoi semplicemente impostare l'attributo checked sul tag <input>:

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>

2) Se esco dalla pagina e rientro non mi conserva lo stato precedentemente impostato, c'è una soluzione??

Ce ne sono diverse a seconda di ciò che vuoi ottenere.

Se stai controllando lo stato di un qualche dispositivo esterno dovresti interrogare il sistema esterno che gestisce quel dispositivo, così da essere sicuro di ottenere un dato reale.

Se vuoi comunque memorizzare a priori lo stato del tuo switch sulla tua pagina, bisogna capire se ti serve avere un dato condivisibile con altri browser o addirittura leggibile da altre postazioni, oppure serve solo ottenerlo quando riapri la pagina sul tuo browser.
Questo significa memorizzare il dato lato server (su un database che potrebbe anche essere un semplice file di testo) oppure lato client, usando un cookie o, meglio ancora, usando localStorage.

[romimmo]

Ciao

Puoi semplicemente impostare l'attributo checked sul tag <input>:

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>

Ce ne sono diverse a seconda di ciò che vuoi ottenere.

Se stai controllando lo stato di un qualche dispositivo esterno dovresti interrogare il sistema esterno che gestisce quel dispositivo, così da essere sicuro di ottenere un dato reale.

Se vuoi comunque memorizzare a priori lo stato del tuo switch sulla tua pagina, bisogna capire se ti serve avere un dato condivisibile con altri browser o addirittura leggibile da altre postazioni, oppure serve solo ottenerlo quando riapri la pagina sul tuo browser.
Questo significa memorizzare il dato lato server (su un database che potrebbe anche essere un semplice file di testo) oppure lato client, usando un cookie o, meglio ancora, usando localStorage.

Probabilmente la soluzione in evidenza credo sia più semplice e si adatta alle mi esigenze. Mi potresti indirizzare??sono un semplice appassionato e non conosco questi linguaggi

[KillerWorm]

Bene, posso giusto consigliarti di dare uno sguardo a qualche guida riguardo localStorage.

Puoi iniziare da queste:
http://www.html.it/articoli/web-stor...condo-html5-1/
http://www.html.it/pag/19298/webstorage-api/

Per ulteriore materiale puoi fare qualche semplice ricerca sul web, ad esempio:
"localstorage leggere scrivere dati"

Prova quindi a mettere su qualcosa, poi se incontri particolari difficoltà puoi sempre chiedere qui sul forum.
Buon proseguimento