Javascript HTML导航链接复制表单按图像提交按钮单击

我的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>    

那个么，当用户点击链接时，我怎么能得到这样的结果，即表单被提交了，并且看起来像是对应的图像按钮被点击了。i、 我希望我的服务器代码不必处理两种不同的方式来做同样的事情。我想我应该使用

onclick（）

——但是我应该在其中添加什么呢

---

i、 e.我可以使用

onclick

提交表单，但它也不会设置正确的图像按钮，即服务器将接收post请求，但没有按下任何输入类型的图像，因此服务器将不知道请求是什么。

一个解决方案是在每个链接上附加一个单击处理程序，然后将触发

输入

的单击

要匹配哪个链接应单击哪个输入，输入的

名称

属性是一个选项，其中可以使用自定义属性的

数据-*

前缀将相同内容添加到链接中

<a href="#" class="nav-link" data-name="statusreport">Status Report</a>

e.preventDefault（）阻止链接导航，我们希望表单被提交

堆栈片段


document.querySelectorAll（'a[数据名]）.forEach（函数（链接）{
link.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
document.querySelector（'input[name=“”+this.dataset.name+“]”）。单击（）；
});
});








一种解决方案是在每个链接上附加一个单击处理程序，然后它将触发
输入的单击

要匹配哪个链接应单击哪个输入，输入的
名称
属性是一个选项，其中可以使用自定义属性的
数据-*
前缀将相同内容添加到链接中

<a href="#" class="nav-link" data-name="statusreport">Status Report</a>

e.preventDefault（）阻止链接导航，我们希望表单被提交

堆栈片段


document.querySelectorAll（'a[数据名]）.forEach（函数（链接）{
link.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
document.querySelector（'input[name=“”+this.dataset.name+“]”）。单击（）；
});
});








服务器端图像映射（即
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
。
服务器端图像映射（即
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
。
您可以使用
form.submit（）
启动表单提交，但是，您提供的代码毫无意义。尽量让它更清楚你想在这里做什么。@LGSon有什么不清楚的地方吗？通过你的编辑，我又读了一遍，它变得更清楚：）。。。因此，我撤回了我的投票，并发布了一个答案。你可以使用
form.submit（）
启动表单提交，但是，你提供的代码毫无意义。尽量让它更清楚你想在这里做什么。@LGSon有什么不清楚的地方吗？通过你的编辑，我又读了一遍，它变得更清楚：）。。。所以我撤回了我的投票结果，并发布了一个答案。@PaulTaylor更新了，所以它只选择了带有属性
a[data name]
@PaulTaylor更新了，所以它只选择了带有属性
a[data name]
的链接。有趣的是，我确信我最初使用图像映射而不是按钮这样做是有原因的，但我不知道那是什么原因！有趣的是，我确信我最初使用图像地图而不是按钮做这件事是有原因的，但我不知道原因是什么！