HTML导航链接复制表单通过点击图片按钮提交

Question

我的web应用程序有一个带有一些图像按钮的表单，每个按钮代表一个任务，当你点击按钮时，它会被发布到/startURL，然后我解码点击了哪个按钮，以及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(使用Bootstrap 4(，我在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提交表单，但它也不会设置正确的图像按钮，即服务器将接收张贴请求，但没有按下任何一个输入类型的图像，因此服务器将不知道请求是什么。

Answer 1

一种解决方案是为每个链接附加一个点击处理程序，然后它将触发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>

Answer 2

服务器端图像地图(即type="image"(将提交单击的坐标。

测试服务器端代码中是否存在statusreport.x和statusreport.y或fixsongs.x和fixsongs.y。

请注意，一些服务器端表单解析器将不接受名称中的.，并对其进行处理(PHP IIRC将其替换为_(。

---

也就是说，如果你想要一个图像按钮，你应该使用一个图像而不是服务器端图像映射的按钮。

<button value="Status Report" name="statusreport" title="Status Report" data-toggle="tooltip" data-placement="bottom" class="btn btn-outline-primary btn-lg">
<img alt="Status Report" src="style/images/status_report.png">
</button>

然后您可以在服务器上检查statusreport或fixsongs。