Replate Input Submit Types with a href - jquery usage?

Question

For all submits of all forms of a given site, I would like them to be replaced by a href links. The "a submit button" is done by applying a sprite technique.

So, something around those lines:

#formLogin .submit
    {
        width:60px;
        background:url('../img/botaoLogin.png') no-repeat;
        height:22px;
        margin-left: 20px;
        margin-top:3px;
        text-indent: -9999px;
        display:block;
        float:right;
        background-position: 0px 0;
    }

#formLogin .submit {
    outline: none; /*atenção acessibilidade @todo onfocus necessário! */
}
#formLogin .submit:hover {
        background-position: 0px -22px;
    }

#formLogin .submit:active {
        background-position: 0px -45px;
}

On the HTML side of things, however, I would like to preserve the submit buttons for those that have javascript disabled.

<input type="submit" value="login"/>
<a href="javascript:document.forms['login'].submit()">Login</a>

I suppose that using jquery to .hide() the inputs of type submit and show the a with a class of submit, will work.

But if we have 4 forms with 4 "submit buttons" with different names, should I do one script for each?

I was hoping to have some help about sketching a javascript code that could be put on a "footer" of all my site pages that would replace the input types submits by anchors with a class .submitSomething, where something could be "login" or "register" (because each of those will have a specific image for sake of the sprite technique).

Hope I was clear enough. If not, please, let me know.

Thanks a lot in advance, MEM

Answer 1

No. You dont have to write 4 different javascript.

If you use the submit selector sintax you can just target your script to all of your input type submit elements.

Answer 2

Well, I don't see a reason why you would replace submit buttons with a href links, since you can style submit buttons with sprites and everything just like you would any other html element, but anyways, you're concerned about such functionality with several forms. So here's the answer: you can use jQuery.parent() to submit the correct form. Here's a draft:

jQuery(document).ready(function() {
    jQuery('form input[type=submit]').replaceWith('<a href="#" class="submit-link">Submit</a>');
    jQuery('.submit-link').click(function() {
        jQuery(this).parent('form').submit();
    });
});

Haven't tested the code, but it should work (maybe with a few tweaks).

Cheers.