HTML表单数据传递至send.js无响应问题求助

我帮你找出几个关键问题，修正后就能正常运行了：

问题1：事件绑定位置与写法错误 #

你把onsubmit写在了提交按钮上，但这个事件应该绑定在<form>标签上；而且调用函数时要加括号（只写f1只是引用函数，不会触发执行）。另外，表单默认提交会刷新页面，我们需要在函数里阻止这个默认行为，才能看到弹窗效果。

问题2：Script标签语法错误 #

你的<script>标签写法有误，src是标签的属性，应该放在尖括号内，不是标签的内容里。

问题3：JS字符串拼接语法错误 #

send.js里的alert语句缺少了字符串拼接的+号，直接导致代码报错，浏览器无法执行这个函数。

修正后的代码 #

HTML部分：

<form method="post" name="myform" onsubmit="f1(event)">
  <label for="msg">Message</label>
  <textarea id="msg" name="msg" rows="5" cols="50"></textarea>
  <br>
  <label for="your_name">Your Name:</label>
  <input type="text" name="your_name" id="your_name" />
  <br>
  <label for="customer_number">Customers Number:</label>
  <input type="text" name="customer_number" id="customer_number" />
  <br>
  <input type="submit" value="Send Message" />
</form>
<script src="send.js"></script>

send.js部分：

function f1(event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  var msg = document.getElementById("msg").value;
  var your_name = document.getElementById("your_name").value;
  var customer_number = document.getElementById("customer_number").value;
  
  alert("value 1 = " + msg + " value 2 = " + your_name + " value 3 = " + customer_number);
}

修改后点击提交按钮，就能正常弹出包含表单数据的提示框了。以后遇到类似无反应的情况，可以打开浏览器开发者工具（F12）查看控制台，报错信息会帮你快速定位问题~

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