Changing 'width' of the progress bar in CSS with JQuery

Question

I am learning JQuery and I think I have failed to understand some basics. I am trying to change the width of the progress bar (as if it is moving) to +2% every time one of the radio buttons is clicked. But my function is wrong (value + 2). I would appreciate any comments about that. And when I change it to some fixed value it does not really stay like that. I guess the 'change method' initializes the whole thing every time. So my question is what is the best way to write the result into a file (what I do with 'submit' now) and increase the 'width' value of the progress bar at the same time? Any comment is very appreciated.

<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#progressbar {
  width: 2%;
  height: 30px;
  background-color: #1D1387;
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
    <head>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script>  
 $(document).ready(function() {   
   $('input[name=score]').change(function(){  
        $('form').submit();
        <!-- progress bar moves on 2% every time the radio button is clicked (form is submitted)-->
        $('#progressbar').css('width', function(index, value){
        return value + 2;
        });
   });  
  });  
</script>
    </head>

<form>
<p>Please select one of the variants below:</p><br />
<h2>word</h2>
<br />
<input type="hidden" name="word" value="{{ word }}"/><br />
<label class="rad"><input type="radio" name="score" value="var1" />variant1</label>
<label class="rad"><input type="radio" name="score" value="var2" />variant2</label>
<label class="rad"><input type="radio" name="score" value="var3" />variant3</label>
<label class="rad_other"><input type="radio" name="score" value="var4" />variant4</label><br />
<br />
</form>
<div id="myProgress">
  <div id="progressbar">0/50</div>
</div>
</body>
</html>

After the form "submit" the page usually being reloaded and scripts loads again (if it's not Ajax) - this could be the problem. — Jax-p, Apr 03 '18 at 12:21

Pierre C. · Accepted Answer · 2018-04-03T12:41:01.170

If you submit your form, then you are loading a new page (even if it is the same page) and losing the progress bar changes.

Your code works if you remove the submit() and change the way you increment the width like so:

$('input[name=score]').change(function(){
    $('#progressbar').css('width', function(index, value){
        return "+=2%";
    });
});

A solution for your requests is to use some Ajax and do a POST request (see jQuery post()). There is a question on SO where you can find ways to do this: How to use jquery $.post() method to submit form values

An other solution would be to set the progress bar width when you generate your page (with your back-end language) and keep track of this progress with each requests.

score 1 · Answer 2 · answered Apr 03 '18 at 12:28

First, you're using an HTML comment () in JavaScript, which uses // or /* ... */ comments.

Second, reading the documentation for css(...) you'll see that the value provided to the function might not be in the same unit as in the stylesheet. Putting a simple console.log(value) in the function, we see that it gets the value in pixels.

Here is a working example. I changed the comment and put the percentage in a variable. I had to remove the form.submit() to get the JSFiddle to work, but you can keep it.

Changing 'width' of the progress bar in CSS with JQuery

2 Answers2