怎么将js中的值提交到表单
时间: 2024-05-12 19:13:50 浏览: 39
你可以使用 JavaScript 来获取表单中的值,并将其添加到表单数据中,然后将表单提交到服务器。下面是一个简单的例子:
```html
<form id="myform" action="submit.php" method="post">
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<button type="submit">Submit</button>
</form>
```
```javascript
// 获取表单元素
const form = document.getElementById('myform');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
// 监听表单提交事件
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单输入值
const username = usernameInput.value;
const password = passwordInput.value;
// 创建 FormData 对象并添加表单数据
const formData = new FormData();
formData.append('username', username);
formData.append('password', password);
// 发送表单数据到服务器
fetch(form.action, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
});
```
在上面的例子中,我们首先获取了表单元素和输入框元素。然后,我们监听表单的提交事件,并在事件处理程序中获取了输入框的值。接着,我们创建了一个 FormData 对象,并使用 `append()` 方法将表单数据添加到其中。最后,我们使用 `fetch()` 方法发送表单数据到服务器,并且防止表单默认提交行为。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)