解决 JavaScript 中表单提交按钮失效的问题

本文旨在帮助开发者解决 JavaScript 中表单提交按钮点击后，数据无法正常显示或提交的问题。通过分析问题原因，并提供修改后的代码示例，详细讲解如何正确地使用 event.preventDefault() 阻止表单默认提交行为，并确保数据在表单内的 div 元素中正确显示。

在 Web 开发中，表单的提交是常见的用户交互行为。然而，有时我们会遇到提交按钮点击后，JavaScript 代码无法正常执行，或者数据无法正确显示的问题。这通常是由于表单的默认提交行为与我们自定义的 JavaScript 代码产生了冲突。

问题分析

默认情况下，当用户点击 <button type="submit"> 按钮时，浏览器会尝试提交表单。如果表单没有 action 属性，或者 action 属性指向一个无效的 URL，浏览器可能会刷新页面，导致 JavaScript 代码执行的结果丢失。此外，如果 JavaScript 代码中没有阻止表单的默认提交行为，浏览器也会执行默认的提交操作，从而干扰我们自定义的逻辑。

解决方案

解决这类问题的关键在于：

立即学习“Java免费学习笔记（深入）”；

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

1. 将相关元素包裹在 <form> 标签内。 确保需要处理的输入框和提交按钮都位于 <form> 标签内部。
2. 监听表单的 submit 事件。 不要直接监听按钮的 click 事件，而是监听表单的 submit 事件。
3. 使用 event.preventDefault() 阻止表单的默认提交行为。 在 submit 事件处理函数中，调用 event.preventDefault() 方法，阻止浏览器执行默认的表单提交操作。
4. 正确获取输入框的值并进行处理。 使用 document.getElementById() 或其他 DOM 选择器获取输入框的值，并进行必要的验证和处理。

代码示例

以下是一个修改后的代码示例，演示了如何解决表单提交按钮失效的问题：

<form id="goalForm">
  <div>
    <label>المبلغ المدفوع</label>
    <input id="AmountPaid" type="text" />
    <label>3 Month Goal</label>
    <input id="threeMonthGoal" type="text" />
    <button id="submitButton" type="submit">Print Amount</button>
    <p id='result'></p>
  </div>
</form>

<script>
  const result = document.getElementById('result');

  const userNameInput = function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    let AmountPaid = +document.getElementById('AmountPaid').value;
    let threeMonthGoal = document.getElementById('threeMonthGoal').value;
    result.textContent = +AmountPaid < 100 ? 'Amount must contain at least 3 characters' : AmountPaid;
  }

  document.getElementById("goalForm").addEventListener('submit', userNameInput);
</script>

代码解释：

• <form id="goalForm">：使用 id 属性标识表单，方便 JavaScript 代码获取表单元素。
• <button id="submitButton" type="submit">Print Amount</button>：定义提交按钮，type="submit" 属性使其具有提交表单的功能。
• document.getElementById("goalForm").addEventListener('submit', userNameInput);：监听表单的 submit 事件，当用户点击提交按钮时，userNameInput 函数会被调用。
• event.preventDefault();：阻止表单的默认提交行为，防止页面刷新。
• result.textContent = +AmountPaid < 100 ? 'Amount must contain at least 3 characters' : AmountPaid;：根据输入金额判断是否小于100，如果小于则显示错误信息，否则显示输入的金额。

注意事项

• 确保 <form> 标签正确闭合。
• event.preventDefault() 必须在 submit 事件处理函数的开头调用，以确保在任何情况下都能阻止表单的默认提交行为。
• 可以使用 JavaScript 进行更复杂的表单验证和数据处理。

总结

通过将相关元素包裹在 <form> 标签内，监听表单的 submit 事件，并使用 event.preventDefault() 阻止表单的默认提交行为，我们可以有效地解决 JavaScript 中表单提交按钮失效的问题。这种方法可以确保 JavaScript 代码能够正常执行，并且能够对表单数据进行自定义的处理。 此外，良好的代码组织和错误处理也是确保表单功能正常运行的关键。

以上就是解决 JavaScript 中表单提交按钮失效的问题的详细内容，更多请关注php中文网其它相关文章！