要将HTML表单值传递给按钮上的href标记,可以通过以下步骤实现:
下面是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>传递表单值给按钮的href标记</title>
</head>
<body>
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<button onclick="updateHref()">提交</button>
</form>
<script>
function updateHref() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var href = "https://example.com/?name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email);
document.getElementById("myButton").href = href;
}
</script>
</body>
</html>
在上面的示例中,我们使用了一个表单来收集用户的姓名和邮箱。当用户点击提交按钮时,JavaScript函数updateHref()
将被调用。该函数获取表单元素的值,并构建一个新的href值,将表单值作为查询参数附加到其中。最后,按钮的href属性将被更新为新的值。
请注意,上述示例中的链接地址(https://example.com/)仅作为示例,您可以根据实际需求修改为您想要的目标链接。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云