Question

I have some icon-only action buttons on my application. The buttons are plain old anchor tags styled using JQuery UI, for example:

<a class="move-up-button-icon-only" href="/Ctrl/Action/5/8/2">Up</a>

$('.move-up-button-icon-only').button({
  text: false,
  icons: {
    primary: "ui-icon-arrowthick-1-n"
  }
});

Some of the buttons have a side-effect, so I want to POST to the href.

I know I can use a standard <input type="submit"/> button, but then I cannot use the icon-only button, as JQuery UI cannot put an icon on a normal submit button. I’d really like to keep the visual consistency with my other buttons, so is there any way to change the method of an anchor link from GET to POST?

(It is OK if this does a GET request for browsers that don’t support, say, Javascript. I will have a confirmation page in that case, and a regular form to POST.)

Answer 1

This seems to work, but it really feels like a dirty hack to me. Is this OK, or is there a better way?

$('.move-up-button-icon-only').click(function () {
  if ($.browser.msie) {
    var form = document.createElement("form")
    $(form).attr('method', 'post').attr('action', $(this).attr('href'));
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  } else {
    $('<form/>').attr('method', 'post')
                .attr('action', $(this)
                .attr('href')).submit();
  }
});

Note that you have to add the form to the DOM in IE, other browsers just work.