Java Script only works after page is refreshed **Amended**

Site URL: https://tracytredoux.com/journal-posts/2021/9/7/03slnvzopxaxb558ax3lvj1o1fnpua

Hi,

**I have amended the description of this problem after further investigation

I created some java script code to display a total of checkboxes ticked in a form on a blog post. It seems that the script does not run when the page loads the first time, but then works if the page is refreshed. Also, I tried dropping the same code into a standard Squarespace web page and it works fine, so the issue is only happening with the blog pages.

I'm very confused!

I am attaching the code below. Thanks for any help.

<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>

Design > Site Styles > Disable Ajax Loading

3 hours ago, tuanphan said:

Design > Site Styles > Disable Ajax Loading

Thanks for the suggestion but it doesn't seem to change anything.

I'm having a similar problem: my simple JS code only works after refresh. Where is Ajax in 7.1? I can't seem to find it anywhere! Thanks!

6 minutes ago, acmejia said:

Where is Ajax in 7.1?

@acmejia Squarespace 7.1 doesn't use Ajax Page Loading. If you're having problems with some code, I suggest you post a new question, giving details of the site and the code you are using.

How does one disable AJAX on 7.1?

2 hours ago, acmejia said:

How does one disable AJAX on 7.1?

Please see the post above. 7.1 doesn't have Ajax, so there's nothing to disable.