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>
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments