点击a标签 提交a标签的值
时间: 2023-12-06 08:00:15 浏览: 39
要实现点击 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 元素添加到表单中,并将表单添加到页面中,并提交表单。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> one.jsp two.jsp three.jsp error.jsp </head> <body> 请输入1至100之间的整数:<input type="text" name="name"> <input type="submit" value=提交> <% String str=request.getParameter("name"); if(1<=str<=50){ %> <form action="two.jsp" method=post/> <% } else if(50<str<=100){ %> <form action="three.jsp"method=post/> <% } else{ %> <form action="error.jsp"method=post/> <% } %> </body> </html>
![](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)
<title>更新汽车等级</title> <body> <main> 修改汽车等级 <form id="saveForm"> <input type="hidden" name="id" value="${data.id }"> <label>汽车等级</label> <input type="text" name="cname" value="${data.cname }" class="form-control"> </form> <button type="button" id="save" class="btn btn-primary">确定提交</button> 返回 </main> </main> <script> $("#save").click(function() { $.ajax({ cache : true, type : "post", url : "CategoryServlet?action=updateCategory", data : $("#saveForm").serialize(), async : false, success : function(e) { if (e == 'yes') { alert("修改成功!"); window.parent.location.href = "CategoryServlet?action=CategoryList"; } else { alert("修改失败!"); } } }) }); </script> </body> </html>
![](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)