我的 javascript 是不是正确连接到 HTML 并触发？

Posted 2023-05-09

【中文标题】我的 javascript 是不是正确连接到 HTML 并触发？

【英文标题】：Is my javascript is connected to HTML correctly and triggering?我的 javascript 是否正确连接到 HTML 并触发？

【发布时间】：2018-11-30 02:12:05

【问题描述】：

我的表单设置为id="contactForm"。当我在相应的 JS 文件中写入$("#contactForm").submit(function(event)... 时，它甚至似乎什么都没有触发。

这里有什么问题？

$("#contactForm").submit(function(event) 
  // cancels the form submission
  event.preventDefault();
  console.log("submit hit");
  alert("Submitted");
);

<script src="js/jquery-3.2.1.min.js"></script>
^ I use this in production, not a CDN 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="modal-body">
<form role="form" action="form-process.php" method="POST" id="contactForm">
  <div class="input-group mb-3">
    <label for="name"></label>
    <div class="input-group-prepend"> <span class="input-group-text">Name</span> </div>
    <input type="text" class="form-control" id="name" aria-label="First and last name.">
    <div class="invalid-feedback">Required</div>
    <div class="valid-feedback"></div>
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend"> <span class="input-group-text">Email</span> </div>
    <input type="email" class="form-control" aria-label="Email address." id="email">
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Subject</button>
      <div class="dropdown-menu"> <a class="dropdown-item" href="#">Music</a> <a class="dropdown-item" href="#">Programming</a> <a class="dropdown-item" href="#">Just saying hi!</a> </div>
    </div>
    <input type="text" class="form-control" aria-label="Subject" id="subject">
  </div>
  <div class="input-group">
    <div class="input-group-prepend mb-3"> <span class="input-group-text">Message</span> </div>
    <textarea class="form-control" id="message" aria-label="Email message."></textarea>
  </div>
</form>
<button class="btn btn-outline-primary" id="form-submit" type="submit" data-dismiss="modal">Send</button>
</div>
<script src="js/email.js"></script>
^ This has the contents of the form logic

这是live site的链接。

【问题讨论】：

请在minimal reproducible example 中包含所有相关代码。代码的外部链接只能用于演示目的。

您能否发布代码，而不是让我们搜索您的网站以尝试找出其位置和问题所在？

第 1 步：验证您认为自己得到的就是您正在得到的。使用console.log 打印$("#contactForm") 为您提供的内容。真的是这样的形式吗？如果没有，您已经自己解决了部分问题。如果是，这是添加到问题中的好信息，因为这意味着问题不在于元素选择。

可能是您返回 false 或脚本在函数上遇到异常，从而停止执行提交事件。此外，如果有两个元素具有相同的 id，则代码将不起作用。

【参考方案1】：

您的提交按钮似乎在<form> 之外。 它需要在<form> 标签内才能提交表单并触发提交事件。

（由于data-dismiss="modal"，按钮仍然关闭模式。）

$("#contactForm").submit(function(event) 
  // cancels the form submission
  event.preventDefault();
  console.log("submit hit");
  alert("Submitted");
);

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

<form role="form" action="form-process.php" method="POST" id="contactForm">
  <div class="input-group mb-3">
    <label for="name"></label>
    <div class="input-group-prepend"> <span class="input-group-text">Name</span> </div>
    <input type="text" class="form-control" id="name" aria-label="First and last name.">
    <div class="invalid-feedback">Required</div>
    <div class="valid-feedback"></div>
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend"> <span class="input-group-text">Email</span> </div>
    <input type="email" class="form-control" aria-label="Email address." id="email">
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Subject</button>
      <div class="dropdown-menu"> <a class="dropdown-item" href="#">Music</a> <a class="dropdown-item" href="#">Programming</a> <a class="dropdown-item" href="#">Just saying hi!</a> </div>
    </div>
    <input type="text" class="form-control" aria-label="Subject" id="subject">
  </div>
  <div class="input-group">
    <div class="input-group-prepend mb-3"> <span class="input-group-text">Message</span> </div>
    <textarea class="form-control" id="message" aria-label="Email message."></textarea>
  </div>
  <button class="btn btn-outline-primary" id="form-submit" type="submit" data-dismiss="modal">Send</button>
</form>

如果有兴趣，另请参阅Submit form using a button outside the tag。

【讨论】：

我将按钮放入

您可能希望将 javascript 放在 <body> 的末尾之前，使用 async/defer，或者在 DOM 准备好后执行代码。见Where should I put <script> tags in html markup?

我现在将它放在底部的 中。 email.js 文件仍未触发。 Chrome JS 调试器给了我这个错误：GET blob:http://noahnethery.com/49de1942-e40a-4b67-8898-7954147d3444 0 ()

请创建working example 来帮助演示问题。该代码在我上面的示例中似乎可以正常工作，但您的代码中可能存在导致问题的未知内容。

我已经更新它以更接近我的 HTML 文档。如果我需要发布整个文档，如果找不到错误，我会在接下来发布。谢谢！

【参考方案2】：

提交表单的按钮#form-submit 需要位于<form></form> 块内。 尝试修复它，它会正常工作。