複数のボタンクリックをデータベースに保存

Question

私は両親が新生児を世話するためのWebアプリケーションを作成しています。 私はそれぞれのタスクに3つのボタンがあります。例えば、おむつ交換のための3つのステップ（教えて！>完了しました。 ボタンをクリックすると色が変わり、このステップが完了したことを示します。

質問： この「チェックリスト」を見てボタンをクリックするには、両親がログインする必要があります。最初に指示されたボタンをクリックすると、色の変化が起こったとします。しかし、次回にログインして「チェックリスト」を進めると、「指示された」ボタンがクリックされたことが表示されます。

Here's a picture how the checklist looks like unclicked

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

ボタンのコード：

 <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> 

（悪いフォーマットのため申し訳ありません）色を変更するためのスクリプト：

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); 
    } 
} 

私が欲しいです私のphpmyadminに保存する選択されたオプション（MySQL）データベースを使用して、親が次回のボタンチェンジを参照できるようにします。 これを私のデータベースに保存するコードがどのように見えるか、また次回に表示する方法はありますか？

Answer 1

Matsson

は、私は、ユーザーがそれをクリックするか、まったくされた場合、ページが知らない来るときあなたはその後、status_buttonとしてフィールドを追加することができ、ビクターに同意します。

<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がmysqli結果であり、状況をもたらす：例えば

Javascriptの一部whitinあなたはこのような何かを書くことができます。

そして、あなたは少しあなたのHTMLコードを変更することができますjavascript関数で、その後

<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とhere