bar的值从input来怎么写
时间: 2024-01-01 14:06:25 浏览: 22
如果需要从输入框获取参数的值,可以使用 JavaScript 来获取输入框的值,并将其作为参数添加到 URL 中。例如:
```html
<form action="/example">
<div class="form-group">
<input type="search" name="search-field" id="search-field" placeholder="Search Here..." required>
<button type="submit"><i class="far fa-search"></i></button>
</div>
</form>
```
```javascript
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const input = document.querySelector('#search-field');
const keyword = input.value; // 获取输入框的值
const url = `/example?foo=${keyword}`; // 构造带参数的 URL
window.location.href = url; // 跳转到目标页面
});
```
上述代码将会在表单提交时获取输入框的值,并将其作为名为 `foo` 的参数添加到 URL 中,然后跳转到目标页面。在目标页面中,可以通过 JavaScript 来获取传递的参数。例如:
```javascript
const urlParams = new URLSearchParams(window.location.search);
const foo = urlParams.get('foo');
console.log(foo); // 输出:输入框中的值
```
使用上述方法可以实现从输入框获取参数的值,并将其作为参数添加到 URL 中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)