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>";
}
?>