HTML导航链接复制表单按图像提交按钮单击
HTML导航链接复制表单按图像提交按钮单击
提问于 2018-07-25 04:49:58
我的web应用程序有一个带有一些图像按钮的表单，每个按钮代表一个任务，当您单击按钮时，它将发送到/start URL，然后我解码被单击的按钮以及来自httpRequest的表单的值。
<form action="/start" method="post">
<input type="image" value="Status Report" name="statusreport" src="style/images/status_report.png" title="Status Report" data-toggle="tooltip" data-placement="bottom" class="btn btn-outline-primary btn-lg">
<input type="image" value="Fix Songs" name="fixsongs" src="style/images/fixsongs.png" title="Fix Songs" data-toggle="tooltip" data-placement="bottom" class="btn btn-outline-primary btn-lg">
<input type="text" name="folder" id="folder" class="form-control" value="C:\Music" aria-describedby="selectfolderaddon">
</form> 我现在已经添加了一个navbar (使用Bootstrap4)，我已经在navbar上包含了相同的任务。
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link">
Status Report
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Fix Songs
</a>
</li>
</ul>那么，当用户单击链接时，如何才能使表单被提交，并且它看起来就像是已单击了等效的图像按钮。也就是说，我更希望我的服务器代码不需要处理两种不同的方式来做同样的事情。我想我用的是onclick() --但是我该往里面放什么呢？
例如，我可以使用onclick提交表单，但它不会设置正确的图像按钮，即服务器将接收post请求，但没有按下任何输入类型的图像，因此服务器不会知道请求是什么。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-25 16:07:29
一种解决方案是将点击处理程序附加到每个链接，然后这将触发input的点击。
为了匹配哪个链接应该单击哪个输入，输入的name属性是一个选项，其中使用自定义属性的data-*前缀将相同的属性添加到链接。
<a href="#" class="nav-link" data-name="statusreport">Status Report</a>然后，只需使用element.dataset.name获取它的值。
document.querySelectorAll('a[data-name]').forEach( function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('input[name="'+this.dataset.name+'"]').click();
});
});e.preventDefault();阻止链接导航，而我们希望提交表单。
堆栈代码段
document.querySelectorAll('a[data-name]').forEach( function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('input[name="'+this.dataset.name+'"]').click();
});
});<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link" data-name="statusreport">
Status Report
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-name="fixsongs">
Fix Songs
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Ohter link
</a>
</li>
</ul>
<form action="/start" method="post">
<input type="image" value="Status Report" name="statusreport" src="style/images/status_report.png" title="Status Report" data-toggle="tooltip" data-placement="bottom" class="btn btn-outline-primary btn-lg">
<input type="image" value="Fix Songs" name="fixsongs" src="style/images/fixsongs.png" title="Fix Songs" data-toggle="tooltip" data-placement="bottom" class="btn btn-outline-primary btn-lg">
<input type="text" name="folder" id="folder" class="form-control" value="C:\Music" aria-describedby="selectfolderaddon">
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51507325
复制相关文章
相似问题