HTML nav link replicating form submit by image button click

Question

My web application has a form with some image buttons, each button represents a task, when you click on the button it is posted to the /start URL and then I decode which button is clicked and also the value of the form from the 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 have now added a navbar (using Bootstrap 4), I have included the same tasks on the 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>

So how do I get it so when user clicks on link that the form is submitted and it looks like the equivalent image button has been clicked. i.e. I would prefer my server code not to have to handle two different ways to do the same thing. I suppose I use onclick() - but what do I put into it.

i.e. I could use onclick to submit the form, but it would not also set the correct image button, i.e. the server would receive the post request but without either of the input type images having been pressed, so the server would not know what the request was.

You can fire a form submission with `form.submit()`, still, the code you provided make no sense what so ever. Try to make it more clear what it is you are trying to do here. — Asons, Jul 24 '18 at 21:12
With your edit, and me reading it one more time, it became more clear :) ... so I retracted my close vote and posted an answer. — Asons, Jul 25 '18 at 08:08

Asons · Accepted Answer · 2018-07-25T08:59:23.710

One solution is to attach a click handler to each link, which then will trigger an input's click.

To match which link should click which input, the inputs'sname attribute is one option, where one add the same to the link, using custom attribute's data-* prefix.

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

Then simply grab its value with, in this case, 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();
  });
});

The e.preventDefault(); prevents the link to navigate, instead we want the form to be submitted.

Stack snippet

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>

@PaulTaylor Updated so it only picks links with the attribute `a[data-name]` — Asons, Jul 25 '18 at 09:00

score 1 · Answer 2 · answered Jul 25 '18 at 08:18

Server-side image maps (which are what type="image") are will submit the coordinates that were clicked on.

Test for the presence of statusreport.x and statusreport.y or fixsongs.x and fixsongs.y in your server side code.

Note that some server-side form parsers will not accept . in a name and will munge it. (PHP, IIRC, replaces it with an _).

That said, if you want a button that is an image, you should use a button that is an image and not a server-side image map.

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

Then you can just check for statusreport or fixsongs on the server.

Interesting, Im sure there was a reason why I originally did it this using image map rather than button, but don't know what that reason was ! — Paul Taylor, Jul 25 '18 at 09:00

HTML nav link replicating form submit by image button click

2 Answers2