js获取form表单内容代码

以下是获取一个表单的代码：

HTML：

<form id="myForm">
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<br>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<br>
<input type="submit" value="Submit">
</form>

JavaScript：

const form = document.querySelector('#myForm');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单提交
const formData = new FormData(form); // 创建 FormData 对象
const data = Object.fromEntries(formData.entries()); // 将 FormData 转换为对象
console.log(data); // 输出表单内容
});

相关问题

js获取form表单输入的内容代码

以下是获取表单输入内容的JavaScript代码：

// 获取表单元素
const form = document.querySelector('form');

// 监听表单提交事件
form.addEventListener('submit', (event) => {
  // 阻止表单的默认提交行为
  event.preventDefault();

  // 获取表单中的输入元素
  const inputName = document.querySelector('#inputName');
  const inputEmail = document.querySelector('#inputEmail');
  const inputMessage = document.querySelector('#inputMessage');

  // 获取输入元素的值
  const nameValue = inputName.value;
  const emailValue = inputEmail.value;
  const messageValue = inputMessage.value;

  // 打印输入的值
  console.log(`Name: ${nameValue}`);
  console.log(`Email: ${emailValue}`);
  console.log(`Message: ${messageValue}`);
});

在表单提交事件中，首先阻止了表单的默认提交行为，然后通过querySelector方法获取了表单中的输入元素，并通过value属性获取了输入元素的值。最后，将获取到的值打印到控制台中。

js获取form表单输入的内容完整代码

在 HTML 中，我们需要为 form 元素添加一个 id，方便 JavaScript 获取。

HTML 代码：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br><br>
  <input type="submit" value="Submit">
</form>

接下来，我们可以使用 JavaScript 获取表单中的值。

JavaScript 代码：

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;
  
  console.log('Name:', name);
  console.log('Email:', email);
  console.log('Message:', message);
  
  // 这里可以将表单内容提交到服务器或其他操作
});

在 JavaScript 中，我们首先获取表单元素，并添加一个 submit 事件监听器。当表单提交时，我们使用 `event.preventDefault()` 阻止默认行为，然后获取表单中的每个输入元素的值。最后，我们可以在控制台中打印表单值，或将其提交到服务器或执行其他操作。