Can someone help me explain why the JS isn't working in HTML?

Question

I'm trying to get the script to hide/show fields, depending on the picklist selection. Though, I cannot get the script to run.

Any input is greatly appreciated.

This is the script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> <script/>
<script>
  $("#seeAnotherField").change(function() {
    if ($(this).val() == "yes") {
      $('#otherFieldDiv').show();
      $('#otherField').attr('required', '');
      $('#otherField').attr('data-error', 'This field is required.');
    } else {
      $('#otherFieldDiv').hide();
      $('#otherField').removeAttr('required');
      $('#otherField').removeAttr('data-error');
    }
  });
  
  $("#seeAnotherField").trigger("change");
</script>

<div class="form-group">
  <label for="seeAnotherField">Do You Want To See Another Field?</label>
  <select class="form-control" id="seeAnotherField">
    <option value="no">No Way.</option>
    <option value="yes">Absolutely!</option>
  </select>
</div>

<div class="form-group" id="otherFieldDiv">
  <label for="otherField">Here you go!</label>
  <select class="form-control" id="otherField">
    <option>Yay</option>
    <option>Woo</option>
    <option>Hazah</option>
    <option>Yipee</option>
    <option>Hoorah</option>
  </select>
</div>

The closing script tag is wrong, you need ``. Not sure if that kills the actual script though. — Chris G, May 01 '20 at 09:59
Please provide with clean & working example where the developers from around the globe can help you by running it. As of now, your example looks incomplete. You can insert code snippets as well. — Shashank Agrawal, May 01 '20 at 10:00

score 1 · Answer 1 · answered May 01 '20 at 10:01

The codes are supposed to go after the layout, because they refer to it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>

<div class="form-group">
  <label for="seeAnotherField">Do You Want To See Another Field?</label>
  <select class="form-control" id="seeAnotherField">
    <option value="no">No Way.</option>
    <option value="yes">Absolutely!</option>
  </select>
</div>

<div class="form-group" id="otherFieldDiv">
  <label for="otherField">Here you go!</label>
  <select class="form-control" id="otherField">
    <option>Yay</option>
    <option>Woo</option>
    <option>Hazah</option>
    <option>Yipee</option>
    <option>Hoorah</option>
  </select>
</div>

<script>
  $("#seeAnotherField").change(function() {
    if ($(this).val() == "yes") {
      $('#otherFieldDiv').show();
      $('#otherField').attr('required', '');
      $('#otherField').attr('data-error', 'This field is required.');
    } else {
      $('#otherFieldDiv').hide();
      $('#otherField').removeAttr('required');
      $('#otherField').removeAttr('data-error');
    }
  });
  
  $("#seeAnotherField").trigger("change");
</script>

score 1 · Answer 2 · answered May 01 '20 at 10:01

There's a couple of issues:

You've got a typo in the closing script tag; it should be </script> not <script />
You need to put your jQuery logic in a document.ready handler as you're running it in the head, as such you're trying to attach the event handler before the elements exist in the DOM

Also note that it's better practice to set the default visibility state of elements in CSS to avoid the FOUC, and you can chain the methods you call on a jQuery object to decrease the number of times the DOM needs to be accessed.

With that said, try this:

jQuery($ => {
  $("#seeAnotherField").change(function() {
    if ($(this).val() == "yes") {
      $('#otherFieldDiv').show();
      $('#otherField').attr({
        'required': '',
        'data-error': 'This field is required.'
      });
    } else {
      $('#otherFieldDiv').hide();
      $('#otherField').removeAttr('required data-error');
    }
  }).trigger("change");
});

#otherFieldDiv { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="form-group">
  <label for="seeAnotherField">Do You Want To See Another Field?</label>
  <select class="form-control" id="seeAnotherField">
    <option value="no">No Way.</option>
    <option value="yes">Absolutely!</option>
  </select>
</div>

<div class="form-group" id="otherFieldDiv">
  <label for="otherField">Here you go!</label>
  <select class="form-control" id="otherField">
    <option>Yay</option>
    <option>Woo</option>
    <option>Hazah</option>
    <option>Yipee</option>
    <option>Hoorah</option>
  </select>
</div>

score 0 · Answer 3 · answered May 01 '20 at 10:00

0

The script is in the head of your document. So the DOM objects are not yet created.

Put it on the last position or inside a document.ready method

answered May 01 '20 at 10:00

Alejandro Teixeira Muñoz

2,556
1
17
31

Can someone help me explain why the JS isn't working in HTML?

3 Answers3