jQuery code not executing code when javascript is executed?

Question

Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>

    <div class="container mt-4">
      <h1 class="text-left" style="margin-bottom: 50px">Daily Fridge & Freezer Monitoring Record</h1>
        <form action="/auth/21-TEMP-01b" method="post" id="form">
          <div class="form-group">
            <label>Select Fridge Or Freezer</label>
            <select class="form-control" id="fridgeFreezer" name="fridge">
              <option value="Fridge-1">Fridge 1</option>
              <option value="Fridge-2">Fridge 2</option>
            </select>
          </div>

          <div class="form-group fridges Fridge-1">
            <h4>Fridge 1</h4>
            <label>Temperature °C</label>
            <input class="form-control" type="number" id="temperature-1" name="temperature-1">

            <label>Comments</label>
            <textarea class="form-control" rows="3" id="comments-1" name="comments-1"></textarea>
          </div>

          <div class="form-group fridges Fridge-2">
            <h4>Fridge 2</h4>
            <label>Temperature °C</label>
            <input class="form-control" type="number" id="temperature-2" name="temperature-2">

            <label>Comments</label>
            <textarea class="form-control" rows="3" id="comments-2" name="comments-2"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>



  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script type="text/javascript">

  $(document).ready(function(){


      $("select").change(function(){
      $(this).find("option:selected").each(function(){
      if($(this).attr("value")=="Fridge-1"){
          $(".fridges").not(".Fridge-1").hide();
          $(".Fridge-1").show();
      }
      else if($(this).attr("value")=="Fridge-2"){
          $(".fridges").not(".Fridge-2").hide();
          $(".Fridge-2").show();
      }
      else{
          $(".fridges").hide();
      }
      });
  })

  .change();

  var temp1 = document.getElementById('temperature-1');
  var form = document.getElementById('form');

  form.addEventListener('submit', function(e) {

    if(temp1.value === '' || temp1.value == null) {
      e.preventDefault()


      document.querySelector('#fridgeFreezer [value="Fridge-1"]').selected = true;

      alert("temp1 not fully filled")
    }
  })


  });

  </script>
  </body>
</html>

Idea

I am trying to create form validation.

Running the above code details

You will see when you change the option in the drop down menu - different div element loads up. This is done through the jQuery code in the script.

Option 1

Option 2

Next, Javascript

I will be using Javascript to validate the form.

I only have started out validating the first div element of fridge 1. If value is empty I have an alert saying which input has not been filled.

In this scenario I have cleared out all data from Fridge 1 to run the if statement for the error.

Notice this line of code:

document.querySelector('#fridgeFreezer [value="Fridge-1"]').selected = true;

This re-selects the option to the one has the error.

But when I run it - this happens.

Div element of fridge-2 is still showing? How come is the jQuery not executing ?

MDN says .selected means "initially selected". I think you have to change the value on the select element not the options once the page is rendered. Or maybe you could try triggering the 'change' event on the select manually if that's the bit you're having trouble with. — Rup
– Rup, Commented Jul 17, 2020 at 9:01
@Rup What do you mean by your first comment aha? I can't get my head around it to what you mean. You mean something like this: document.getElementById('fridgeFreezer').value='Fridge-1';? — DeveloperLV
– DeveloperLV, Commented Jul 17, 2020 at 9:07

TheWuif · Accepted Answer · 2020-07-17 09:10:58Z

4

You have to trigger a change event if you want the change event listener to execute.

  form.addEventListener('submit', function(e) {
    if(temp1.value === '' || temp1.value == null) {
      e.preventDefault()

      $('#fridgeFreezer').val("Fridge-1"); // can be simplified like this
      $('#fridgeFreezer').trigger("change"); // important line

      alert("temp1 not fully filled")
    }
  })

answered Jul 17, 2020 at 9:10

TheWuif

1,0469 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery code not executing code when javascript is executed?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related