user8380237 user8380237 -3 years ago 119
HTML Question

How to update progress bar using checkboxes on different page

I want to update a progress bar value using check boxes. The idea is check boxes and progress bar on different pages. when I check the checkbox on page 1 it will update the progress bar value on another page. I am really stuck. Tried every possible thing. Help me!!!

This is my code:

Review-order.html

<div class="progress">
<p><progress id="avancement" value="0" max="100"></progress></p>
<span class="sr-only"></span>
</div>

<script type="text/javascript">
$(function() {
$('.progressbar_chkbox').click(function() {
var progress = sessionStorage.getItem("progress");
$('#avancement').val(progress);
});

});

</script>


Notification.php

<div class="c-content-panel">
<?php
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_array($result,MYSQLI_BOTH))
{
?>
<div class="c-body">
<div class="alert alert-success alert-dismissible" role="alert"> This issue has been reported by <?php echo $row['your_name']; ?> from <?php echo $row['store_name']; ?>
<p> <?php echo $row['issue_title']; ?></p>
<p><?php echo $row['file'] ?></p>
<p><a href="uploads/<?php echo $row['file'] ?>" target="_blank">View File </a></p>
<a class="c-font-slim" href="#">read this important alert message</a>.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="c-content-panel">

<div class="c-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label class="col-md-4 control-label">Action</label>
<form action="track.php" method="post">
<div class="col-md-6">
<label class="checkbox-inline">
<input type="checkbox" class="progressbar_chkbox" type="checkbox" id="pending" onclick="send();" data-progress="20" value="pending">Pending </label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" class="progressbar_chkbox" id="read" type="checkbox" onclick="send();" data-progress="40" value="option2" value="read"> Read</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" class="progressbar_chkbox" id="completed" type="checkbox" onclick="send();" data-progress="80" value="option3" name="completed"> Completed </label>
<button type="button" class="btn btn-theme c-btn-square" onclick="send();">
Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

<?php } ?>
<script type="text/javascript">

$(function() {

$('.progressbar_chkbox').click(function() {

var progress = $(this).data('progress');

sessionStorage.setItem("progress", progress)

});

});
</script>

Answer Source

I see you are using sessionStorage. You need to use localStorage. That should work if the pages are from the same origin - You however do not HAVE a $('.progressbar_chkbox') on the other page so you would need to check the storage using setInterval

Here is a fiddle since SO does not allow sessionStorage/localStorage

var tId;
$(function() {
  tId = setInterval(function() {
    var progress = localStorage.getItem("progress");
    $('#avancement').val(progress);
  },1000);
});

Have a look at

http://plungjan.name/SO/progress/page1.html
http://plungjan.name/SO/progress/page2.html

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download