Save multiple buttonclicks in database

Question

I'm working on a webapplication for parents to take care of their newborn. I have three buttons for each task, like a progressflow which will show how far in a given task they have been educated (such as three steps for diaper change (Instructed > Done with help > Done by myself)). When a button is clicked it will change color to indicate that this step has been completed.

Now to the question; The parents will have to log in to be able to see this "checklist" and click the buttons. Say that the first time they click the button where they've been instructed, the color change. But the next time they log in to proceed in the "checklist", they'll still see that the "instructed" button has been clicked.

Here's a picture how the checklist looks like unclicked

Here's a picture how the checklist looks like with some clicked options.

The code for the buttons:

      <div class="container" id="checkcontainer">
  <h2>Diaper change</h2>


  <input type="button" value = "Instructed" style= "color:black" onclick="setColor(this)";/>
  <input type="button" value = "Done with help" style= "color:black" onclick="setColor(this)";/>
  <input type="button" value = "Done by myself" style= "color:black" onclick="setColor(this)";/>
  </div>

The script to change the color (sorry for the bad format):

 function setColor(element) {
    if(!element.hasAttribute('data-count')){
    element.setAttribute('data-count', 1);
  }var count = element.getAttribute('data-count');

    if(count == 0){
    element.style.backgroundColor = '#ffffff';
    element.setAttribute('data-count', 1);
  } else{
    element.style.backgroundColor = '#7fff00';
    element.setAttribute('data-count', 0);
  }
}

I want the chosen option to be stored in my phpmyadmin (MySQL) database, for the parents to see the buttonchange for the next time. Any ideas how the code might look like to store this in my database AND also show it for the next time?

if you don not want to refresh the page (which I assume you do not) then in the javascript function that changes the color first make a ajax call to a php script that saves the value in the database, on success of this call you can change the color. Then query the status from the database before displaying the result — Victor Radu, Feb 07 '17 at 12:53

score 0 · Answer 1 · edited May 23 '17 at 10:29

Matsson

I agree with Victor, You can add a field as status_button then when the user come The page knows if it was clicked or no.

For example whitin Javascript part you can write something like this:

<script type="text/javascript">
 var instructed = '<?php echo $data['status_instructed'];?>';
 var help = '<?php echo $data['status_help'];?>';
 if( instructed == true ){
  var a = document.getElementById('button_instructed');
  a.style.backgroundColor = '#7fff00'';
 } 
 if( help == true ){
  var b = document.getElementById('button_help');
  b.style.backgroundColor = '#7fff00'';
 }
</script>

$data is the mysqli result and bring the status.

And you can change a little your html code:

<input type="button" id="button_instructed" value = "Instructed" style= "color:black" onclick="setColor(this)";/>
 <input type="button" id="button_help" value = "Done with help" style= "color:black" onclick="setColor(this)";/>
 <input type="button" id="button_myself" value = "Done by myself" style= "color:black" onclick="setColor(this)";/>

You can read more here and here

Save multiple buttonclicks in database

1 Answers1