title: Read and write to json via html with out php
body: <p>I am able to run this successfully. I would love to accomplish the same thing with out the use of php. Main goal is to change the value of sel from the json file.  Below is my php code and json code. the user.php changes the vaule of sel from the json file when a button is hit.</p>
  <pre><code>&lt;?php
  $jsonString = file_get_contents('sel.json');  //read contents from json file
  $jsondata = json_decode($jsonString, true);             //convert string into json array using this function
  if(isset($_POST['button1']))      //if button is pressed?
  {
      $jsondata[0]['sel'] = 1;      //initialise data to 1
  }
  if(isset($_POST['button2']))      //if button is pressed?
  {
      $jsondata[0]['sel'] = 2;      //initialise data to 2
  }
  if(isset($_POST['button4']))      //if button is pressed?
  {
      $jsondata[0]['sel'] = 4;      //initialise data to 4
  }
  if(isset($_POST['button6']))      //if button is pressed?
  {
      $jsondata[0]['sel'] = 6;      //initialise data to 6
  }
  
  $newJsonString = json_encode($jsondata);     //encode data back 
  file_put_contents('sel.json', $newJsonString);      //write into file
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;p&gt;json testing&lt;/p&gt;
  &lt;form action=&quot;&lt;?php $_SERVER['PHP_SELF'] ?&gt;&quot; method=&quot;POST&quot;&gt;     
      &lt;button name=&quot;button1&quot; onclick=&quot;placeorder()&quot;&gt; sel1:place order&lt;/button&gt;
      &lt;button name=&quot;button2&quot; onclick=&quot;cancleorder()&quot;&gt;sel2:cancle order&lt;/button&gt;
      &lt;button name=&quot;button4&quot; onclick=&quot;unlockenotdone()&quot;&gt;sel4:unlock UV box(notdone)&lt;/button&gt;
      &lt;button name=&quot;button6&quot; onclick=&quot;unlockedone()&quot;&gt;sel6:unlock UV box(done)&lt;/button&gt;
  &lt;/form&gt;
  &lt;p id=&quot;ui&quot;&gt;&lt;/p&gt;
  &lt;script&gt;
      var x = document.getElementById(&quot;ui&quot;);
      function placeorder() {
          
          console.log(1);
          x.innerHTML = &quot;Your Order has been Placed&quot;;
          clear();
      }
      function cancleorder(){
          var usrResponse=confirm('are you sure you want to cancle the order?');
          if(usrResponse==true){
              cancleconfirm();//call function ChangState2()
              }
          }
      function cancleconfirm() {
          console.log(2);
          x.innerHTML = &quot;Your Order has been canceled&quot;;
          clear();//call function clear()
      }
      function unlockenotdone(){
      var usrResponse=confirm('The sterilization is not done. Do you still want to unlock the book?');
          if(usrResponse==true){
              console.log(4);
              openconfirm();
          }
      }
      function unlockedone()
      {
          console.log(6);
          openconfirm();
      }
      function openconfirm() {
          x.innerHTML = &quot;The UV book is now unlocked&quot;;
          clear();//call function clear()
      }
      function clear()
      {
          setTimeout( function(){x.innerHTML=&quot;&quot;;}, 5000);
          return false;
      }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>this is the sel.json [{&quot;sel&quot;:1}]</p>