本文旨在解决JavaScript中表单提交按钮失效的问题，重点在于理解表单的submit事件以及如何正确地阻止默认提交行为，并展示了如何通过JavaScript获取表单数据并在页面上动态显示。通过修改HTML结构和事件监听方式，确保表单数据能够被正确处理，避免页面刷新导致数据丢失。
在Web开发中，表单是用户与服务器交互的重要方式。然而，有时我们会遇到表单中的提交按钮点击后没有反应，或者页面刷新导致数据丢失的问题。这通常是由于对表单的submit事件处理不当，以及HTML结构不合理造成的。本文将详细介绍如何正确处理表单提交事件，并提供相应的代码示例。
表单的submit事件
当用户点击表单中的提交按钮时，浏览器会触发表单的submit事件。默认情况下，该事件会导致页面刷新，并将表单数据提交到服务器。如果我们需要使用JavaScript来处理表单数据，例如进行验证或在页面上动态显示，就需要阻止浏览器的默认行为。
阻止默认提交行为
阻止默认提交行为的关键在于使用event.preventDefault()方法。该方法可以阻止浏览器执行与事件关联的默认操作。在表单的submit事件处理函数中，我们可以调用event.preventDefault()来阻止页面刷新。
立即学习“Java免费学习笔记（深入）”；
代码示例
以下是一个简单的示例，演示如何使用JavaScript处理表单提交事件：
<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>代码解释：
- HTML结构： 使用<form>标签将表单元素包裹起来，并设置id为goalForm。
-
JavaScript代码：
- 获取result元素的引用，用于显示结果。
- 定义userNameInput函数，该函数将作为submit事件的处理函数。
- 在userNameInput函数中，首先调用event.preventDefault()阻止默认的表单提交行为。
- 然后，获取AmountPaid和threeMonthGoal输入框的值。
- 根据AmountPaid的值进行简单的验证，如果小于100，则显示错误消息，否则显示AmountPaid的值。
- 使用addEventListener方法将userNameInput函数绑定到goalForm的submit事件。
注意事项：
- 确保<p id='result'></p>元素位于<form>标签内部，以便在表单提交时能够正确更新其内容。
- 使用event.preventDefault()阻止默认提交行为后，页面不会刷新，因此可以在页面上动态显示数据。
- 可以使用JavaScript进行更复杂的表单验证，例如检查输入是否为空、是否符合特定格式等。
- 如果需要将表单数据提交到服务器，可以使用XMLHttpRequest或fetch API。
总结
通过正确处理表单的submit事件，我们可以阻止浏览器的默认行为，并使用JavaScript来处理表单数据。这使得我们可以在页面上动态显示数据、进行表单验证，以及将数据提交到服务器。理解并掌握这些技巧，可以帮助我们构建更加灵活和用户友好的Web应用程序。
