文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery代码在执行javascript时不执行代码？

问jQuery代码在执行javascript时不执行代码？
EN

Stack Overflow用户

提问于 2020-07-17 08:57:25

回答 1查看 44关注 0票数 0

码

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

我正在尝试创建表单验证。

运行上述代码详细信息的

当您更改下拉菜单中的选项时，您将看到不同的div元素加载。这是通过脚本中的jQuery代码完成的。

选项1

选项2

下一步，Javascript

我将使用Javascript来验证表单。

我只开始验证fridge 1的第一个div元素。如果值为空，则有一个警告，说明哪些输入未被填充。

在这个场景中，我清除了冰箱1中的所有数据，以运行if语句来判断错误。

注意这一行代码：

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

这将重新选择option到有错误的一个.

但当我运行它时-会发生这种事。

Div元素的fridge-2还在显示吗？为什么jQuery不执行？

javascript

html

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-17 09:10:58

如果要执行更改事件侦听器，则必须触发更改事件。

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62950584

复制

相似问题

问jQuery代码在执行javascript时不执行代码？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery代码在执行javascript时不执行代码？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery代码在执行javascript时不执行代码？
EN