I have just finished making a form that uses some javascript to display a total for the number of checkboxes checked. The script only seems to work when the page is refreshed, but is inactive when the page initially loads. Have I placed the code somewhere that it is not being initialised when the page is loaded?
The page is located at: https://tracytredoux.com/journal-posts/blood-sugar-quiz
I have attached the code below, which is all contained in a Squarespace code block, within a blog post.
Another smaller issue is that the color attribute in the legend style isn’t working. It worked fine when I tried the code on a test page, but when I cut and paste to here it has no effect.
Thanks.
<script>
$(function() {
$("input[name*='symptom']").on("change", function() {
var total = 0;
$("input[type='checkbox']:checked").each(function() {
total += Number($(this).val());
});
$("#total").val(total);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
legend
{
color:#a81918;
padding-left:4px;
padding-right:4px;
}
fieldset
{
border:1px solid #a81918;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
</style>
<form action="">
<fieldset>
<legend>
<span style="color:#6a6a6a"> Select the symptoms that apply to you </span>
</legend>
<input type="checkbox" name="symptom1" value="1" id="cravings">
<label for="cravings">Cravings for carbs, sugar and caffeine</label><br>
<input type="checkbox" name="symptom2" value="1" id="swelling">
<label for="swelling">Excess swelling</label><br>
<input type="checkbox" name="symptom3" value="1" id="fatigue">
<label for="fatigue">Fatigue: relieved by eating</label><br>
<input type="checkbox" name="symptom4" value="1" id="feel-off">
<label for="feel-off">Feel 'off' when you have not eaten</label><br>
<input type="checkbox" name="symptom5" value="1" id="nervous">
<label for="nervous">Feeling nervous</label><br>
<input type="checkbox" name="symptom6" value="1" id="hangry">
<label for="hangry">'Hangry' between meals</label><br>
<input type="checkbox" name="symptom7" value="1" id="headaches">
<label for="headaches">Headaches</label><br>
<input type="checkbox" name="symptom8" value="1" id="dizzy">
<label for="dizzy">Lightheaded, dizzy, or foggy brain</label><br>
<input type="checkbox" name="symptom9" value="1" id="nausea">
<label for="nausea">Nausea</label><br>
<input type="checkbox" name="symptom10" value="1" id="focus">
<label for="focus">Difficulty focussing</label><br>
<input type="checkbox" name="symptom11" value="1" id="lethargy">
<label for="lethargy">Fatigue and lethargy</label><br>
<input type="checkbox" name="symptom12" value="1" id="cravings2">
<label for="cravings2">Food cravings, not satisfied by eating</label><br>
<input type="checkbox" name="symptom14" value="1" id="hunger">
<label for="hunger">Hunger, even after eating</label><br>
<input type="checkbox" name="symptom15" value="1" id="thirst">
<label for="thirst">Increased thirst</label><br>
<input type="checkbox" name="symptom16" value="1" id="fat">
<label for="fat">Mid-belly fat</label><br>
<input type="checkbox" name="symptom17" value="1" id="vision">
<label for="vision">Vision disturbances</label><br><br>
Total <input type="text" value="0" id="total">
</fieldset>
</form>