正文

如何用JavaScript让一个按钮提交另一个表单的实例教程

/0 浏览量
0428

在Web开发中，我们经常需要实现这样的功能：使用一个按钮来提交另一个表单。这个过程可以通过JavaScript来实现。下面，我将为你详细讲解如何通过JavaScript让一个按钮提交另一个表单。

前提条件

  • 熟悉HTML和JavaScript基本语法。
  • 准备一个HTML文件和一个JavaScript文件。

实例步骤

1. 创建HTML结构

首先，我们需要创建两个表单，其中一个表单作为提交目标，另一个表单中包含提交按钮。以下是HTML结构的示例：

<form id="form1">
  <input type="text" placeholder="姓名">
  <input type="text" placeholder="邮箱">
  <button type="button" onclick="submitForm()">提交</button>
</form>

<form id="form2">
  <input type="text" placeholder="目标表单姓名">
  <input type="text" placeholder="目标表单邮箱">
</form>

在上面的代码中，我们创建了两个表单：form1 和 form2。form1 包含两个输入框和一个提交按钮。点击按钮时，将调用 submitForm() 函数。

2. 编写JavaScript函数

接下来，我们需要在JavaScript中编写一个函数来提交目标表单。以下是 submitForm() 函数的实现：

function submitForm() {
  // 获取form1中的表单数据
  var name = document.getElementById('form1').elements[0].value;
  var email = document.getElementById('form1').elements[1].value;

  // 创建一个新的表单数据对象
  var formData = new FormData();
  formData.append('name', name);
  formData.append('email', email);

  // 创建一个新的XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 设置请求类型、URL和异步处理
  xhr.open('POST', 'your-server-url', true);

  // 设置请求完成的回调函数
  xhr.onload = function () {
    if (xhr.status === 200) {
      // 请求成功，处理返回数据
      console.log('提交成功');
    } else {
      // 请求失败，处理错误信息
      console.log('提交失败');
    }
  };

  // 发送请求
  xhr.send(formData);
}

在上面的代码中，我们首先从 form1 获取表单数据，并将其添加到一个新的 FormData 对象中。然后，我们创建一个 XMLHttpRequest 对象来发送异步请求。在请求完成时，我们通过 onload 回调函数处理响应。

3. 完整代码

以下是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>提交另一个表单</title>
  <script>
    function submitForm() {
      var name = document.getElementById('form1').elements[0].value;
      var email = document.getElementById('form1').elements[1].value;

      var formData = new FormData();
      formData.append('name', name);
      formData.append('email', email);

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'your-server-url', true);

      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log('提交成功');
        } else {
          console.log('提交失败');
        }
      };

      xhr.send(formData);
    }
  </script>
</head>
<body>
  <form id="form1">
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="邮箱">
    <button type="button" onclick="submitForm()">提交</button>
  </form>

  <form id="form2">
    <input type="text" placeholder="目标表单姓名">
    <input type="text" placeholder="目标表单邮箱">
  </form>
</body>
</html>

将上述代码保存为HTML文件，并在浏览器中打开，你就可以看到两个表单，其中 form1 包含提交按钮。点击按钮后，目标表单 form2 将被提交。

-- 展开阅读全文 --