Question

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

我现在（使用Bootstrap 4）添加了一个navbar，并且在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。

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

2 个答案: