jeudi 8 avril 2021

Checkboxes (Ajax and JavaScript)

So basically i have an assignment that requires me to have a checkbox and with the help of ajax and javascript, the checkbox need to change its state when its clicked, and that's need to get be dumped in a php program that creates a .txt file. When its not clicked the state should be 0 and when its clicked, the state should be 1.

So far i have this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <style>
     body          { margin-top  : 100px;     }
     .centered     { text-align  : center;
                     font-size   : 70px;      }
     #chkbox > span { padding     : 12px 20px;
                     cursor      : pointer    }
    </style>
    <meta charset="utf-8">
    <script>
    function ajax (url, receive) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          receive(this.responseText);
        }
      };
      xmlhttp.open("GET", url, true);
      xmlhttp.send();
    }

    var chkbox = 1;
    function highlight(n) {
      var div = document.getElementById("chkbox");
       for (var i = 0; < 1; i++) {
        if (i < n)
          div.children[i].innerHTML = "&#9744;";
        else
          div.children[i].innerHTML = "&#9745;";
      }
    }

    function update(n) {
      chkbox = n;
      highlight(n);
    }

    function save(n) {
      ajax('chkbox.php?=count=' + n, update);
    }

   </script>
  </head>
  <body>
    <div class="centered">
      <span id="chkbox" onmouseout="highlight(chkbox)">
        <span onmouseover="highlight(1)" onclick="save(1)"></span>
      </span>
    </div>
  </body>
  <script>
    highlight(stars);
    ajax ('chkbox.php', update);
  </script>
</html>

The checkboxes dont appear in the browser window. Also i tried to add a function that "highlights" the checkbox when mouse is over. Any help please :)




Aucun commentaire:

Enregistrer un commentaire