Submit Link - No Javascript: Downsides?

Question

Hello all,

I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.

If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.

So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='[email protected]' />
  <input type='image' value='E-mail User' />
</form>

Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?

Answer 1

You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.

Answer 2

Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.

So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)

As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.

I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.

Or, as was mentioned the background of the image can blend in with the form background.

Answer 3

I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="[email protected]" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

Answer 4

There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>