HTML 通过JavaScript更改表单输入的值并提交表单

在本文中，我们将介绍如何使用JavaScript来更改HTML表单输入的值，并在用户提交表单时通过JavaScript提交表单。

阅读更多：HTML 教程

1. 改变表单输入的值

要改变HTML表单输入的值，我们可以使用JavaScript的value属性。该属性用于获取或设置输入字段的值。

例如，假设我们有一个包含名称和电子邮件输入字段的表单：

<form>
  <label for="name">名称：</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email"><br><br>

  <input type="submit" value="提交">
</form>

我们可以使用JavaScript来更改名称输入字段的值：

document.getElementById("name").value = "John Doe";

上述代码将更改名称输入字段的值为”John Doe”。

2. 提交表单

要通过JavaScript提交表单，我们可以使用submit()方法。该方法将模拟用户点击提交按钮。

以下是通过JavaScript提交表单的示例代码：

document.querySelector("form").submit();

上述代码将在JavaScript中提交表单。

3. 结合两者

现在，我们将结合使用JavaScript更改表单输入的值，并在用户提交表单时通过JavaScript提交表单。

首先，我们可以创建一个函数，该函数会在用户提交表单时调用：

function submitForm() {
  document.getElementById("name").value = "John Doe";
  document.querySelector("form").submit();
}

上述代码中，submitForm()函数通过JavaScript更改名称输入字段的值为”John Doe”，然后提交表单。

然后，我们可以在提交按钮上使用onclick事件，调用submitForm()函数：

<input type="submit" value="提交" onclick="submitForm()">

现在，当用户点击提交按钮时，submitForm()函数将被调用，表单名称输入字段的值将被更改为”John Doe”，然后表单将通过JavaScript提交。

总结

通过JavaScript更改HTML表单输入的值并提交表单非常有用。通过使用value属性，我们可以轻松地更改输入字段的值。然后，通过使用submit()方法，我们可以通过JavaScript提交表单。结合两者，我们可以实现在用户提交表单时自动更改输入字段的值并提交表单的功能。这对于一些特定的应用场景非常实用，比如自动填充表单或在用户提交之前进行验证。祝你在JavaScript和HTML表单中的开发工作中取得成功！