如何在现有JavaScript代码中使用function init()绑定表单提交事件

一、HTML 调整 #

你只需要修改3处代码即可完成表单替换：

1. 把原代码中 <div class="wrapper"> 替换为 <form action="#" method="post" id="theForm" class="wrapper">
2. 把原 wrapper 对应的闭合标签 </div> 替换为 </form>
3. 修改按钮代码，删除行内 onclick 绑定，明确提交按钮语义：
   原代码：

   <button id="submit" onclick="return validateForm()">Add the temperatures!</button>
   

   修改后：

   <button id="submit" type="submit">Add the temperatures!</button>
   

二、JavaScript 调整 #

1. 把你给出的 init 代码中占位的 insertyourfunctionhere 替换为现有的校验函数名 validateForm，直接加入现有JS文件即可：

   function init() {
       'use strict';
       document.getElementById('theForm').onsubmit = validateForm;
   }
   window.onload = init;
   

2. 调整 validateForm 函数，阻止表单默认提交导致的页面刷新行为，原有逻辑完全保留：

   // 新增事件参数e
   function validateForm(e) {
       // 阻止表单默认提交行为
       e.preventDefault();
       
       // 以下是你原有的validateForm代码，不需要做任何修改
       var t1 = document.getElementById("tempLow").value;
       var t2 = document.getElementById("tempHigh").value;
       // ... 剩余原有逻辑全部保留
   }
   

三、可选优化建议 #

• 可以把两个温度输入框的 type="text" 改为 type="number"，还可以加 step="0.1" 支持小数输入，浏览器会自带数字格式校验，使用体验更好
• 你已经给输入框加了 required 属性，嵌入表单后浏览器会自带必填项提示，如果你不需要自定义的alert提示，可以直接删掉空值判断的alert逻辑

内容的提问来源于stack exchange，提问作者Teddy