点击a标签 提交a标签的值
时间: 2023-12-06 22:00:15 浏览: 80
要实现点击 a 标签提交其值的功能,可以使用 JavaScript 来实现。具体实现步骤如下:
1. 给 a 标签添加一个点击事件监听器;
2. 在点击事件处理函数中,获取到 a 标签的 href 属性值;
3. 构造一个表单,将 a 标签的 href 属性值作为表单的 action 属性值;
4. 将表单的 method 属性值设置为 "get";
5. 创建一个隐藏的 input 元素,并将其 name 属性值设置为 "value",将 a 标签的值作为其 value 属性值;
6. 将 input 元素添加到表单中;
7. 将表单添加到页面中,并提交表单。
下面是一个示例代码:
```html
<a href="http://example.com" class="submit-link" data-value="example">Submit</a>
<script>
var submitLinks = document.querySelectorAll('.submit-link');
submitLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
var form = document.createElement('form');
form.setAttribute('action', link.href);
form.setAttribute('method', 'get');
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'value');
input.setAttribute('value', link.dataset.value);
form.appendChild(input);
document.body.appendChild(form);
form.submit();
});
});
</script>
```
在上面的代码中,我们给 a 标签添加了一个 data-value 属性来存储其值。在点击事件处理函数中,我们首先禁止了默认行为,然后构造了一个表单,并将 a 标签的 href 属性值作为表单的 action 属性值。接着,我们创建了一个隐藏的 input 元素,并将其 name 属性值设置为 "value",将 a 标签的值作为其 value 属性值。最后,我们将 input 元素添加到表单中,并将表单添加到页面中,并提交表单。
阅读全文