CODEWITHSUNDEEP
javascripthtmljquery
DeveloperLV
DeveloperLV

Reputation: 1781

jQuery code not executing code when javascript is executed?

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

enter image description here

Option 2

enter image description here

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.

enter image description here

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

Upvotes: 0

Views: 47

Answers (1)

TheWuif
TheWuif

Reputation: 1036

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")
    }
  })

Upvotes: 4

Related Questions