Hello everyone, I am new to this daniweb community and I really hope you guys will help me with this as I am baffled at what I couldn't come up with or was it not possible to do that?

I want to have a checkbox on either PHP page or on modal like I did below to be checked, then save (submit), and stored in the mysql database so users can have ability to hide or show the product's description every time we go there without it coming back when the page refresh or whatever...Is there any possible that it can be stored as a cookie instead and set it forever? There are a bunch of javascript codes on the toggle button to hide and show but once it refreshes the page, it returns to normal, then you have to re-check to hide the description. How can I store the checkbox value as hidden so it will show "checked" there with the description hidden permanently until it was unchecked?

Many thousands thanks for your help and looking forward to hear from you guys soon!

Here is code below:

index.php

<?php
$query=mysql_connect("localhost","admin","password");
mysql_select_db("testdb",$query);
$result = mysql_query("SELECT * FROM mytable ORDER BY id");
?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test modal with checkbox</title> <meta name="description" content="The HTML5"> <meta name="author" content="description"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script>
$(function() {
  $('#btnLaunch').click(function() {
$('#myModal').modal('show');
  });

  $('#btnSave').click(function() {
var value = $('input').val();
$('h5').html(value);
$('#myModal').modal('hide');
  });
});
</script> <style>
    h5 {
  font-family: arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
}
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
border: 0;
  }

  table caption {
font-size: 1.3em;
  }

  table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
  }

  table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
  }

  table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
  }

  table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
  }

  table td:last-child {
border-bottom: 0;
  }
}
</style> </head> <body> <h5></h5> <script type="text/javascript">

function valueChanged(){
if (document.getElementById('advancecheck').checked) 
    {document.getElementById("subnetmaskdiv").style.display = 'none';
}
else
    document.getElementById("subnetmaskdiv").style.display = 'block';
}

        </script> <div id="subnetmaskdiv" style="display:block;"> <h1>Description: This is full example of description.</h1> </div> <button type="button" id="btnLaunch" class="btn btn-primary">Launch Modal</button> <br> <hr> <br> <div> <script type="text/javascript">
    $(document).ready(function(){
        $('.onoffswitch').click(function(){
            var hiddenValueID = $(this).children(':hidden').val();
            if ($(this).children(':checked').length == 0)
            {
                var valueData = 'This is on.';
            }
            else
            {
                var valueData = 'This is off.';
            }

            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: {value: valueData, id: hiddenValueID},
                done: function(html){
                    $("#display").html(html).show();

                }
            });

        });
    });
</script> </div> <br> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>Enter Name:</p> <input type="text" id="txtInput"> <br> <label>Check to Hide Description:</label> <input type="checkbox" name="advancecheck" id="advancecheck" 
onchange="valueChanged()"/><br> <br> <hr> <br> <table id="datatables" class="display"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Text</th> <th> </th> </tr> </thead> <tbody> <?php while ($row = mysql_fetch_array($result)) { ?> <tr> <td><?php echo $row["id"]; ?></td> <td><?php echo $row["name"]; ?></td> <td><?php echo $row["text"]; ?></td> <td> <div class="onoffswitch"> <input type="hidden" value="<?php echo $row["id"]; ?>" /> <input type="checkbox" class="onoffswitch-checkbox"
                        <?php
                        if($row['text']=="off")
                        {
                            echo "checked";
                        }
                        ?>> <label class="onoffswitch-label" for="myonoffswitch<?php echo $row["id"]; ?>"> <div class="onoffswitch-inner"></div> <div class="onoffswitch-switch"></div> </label> </div> <div id="display"> </div> </td> </tr> <?php
    }
    ?> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" id="btnSave" class="btn btn-primary">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </body> </html>

ajax.php

<?php
$query=mysql_connect("localhost","admin","password");
mysql_select_db("testdb",$query);
if(isset($_POST['value']))
{
$value=$_POST['value'];
$id=$_POST['id'];
mysql_query("update mytable set text='$value' where id=$id");
echo "<h2>You have Chosen the button status as:" .$value."</h2>";
}
?>

What type are your users? Causual browsers or registered users? Both? This can direct your solution.

If you have registered users, then DB storage would be the preferred method, as users can then pick up their preferences from any device as long as they're logged in.
If you have causual browsers, then you can use traditional client-side cookies (this may require a cookie warning). This won't allow your users to share settings across devices, but it will allow them to use the same settings with the same device as long as they don't delete the cookies (or while the cookies have not expired).
For the even more casual browser - you could store data in a single session, i.e. "server-side cookies" in the $_SESSION superglobal variable.

You can even use a mixture of these approaches. A trivial example...

if(isset( $login_id )){
    $settings = getPrefsFromDB( $login_id );
}elseif(isset( $_COOKIES['settings'] )){
    $settings = getPrefsFromCookies();
}else{
    $settings = getPrefsFromSession();
}

This should be placed in a simple function or method - this would be useful for Ajax calls too.

Hello, Thanks for replying to my topic and I made grid with screenshots at this url address - http://ddc1975.ca/grid/ so you can take a look what I am looking for.