Using <a> to submit a form without using javascript

[RooLord]

Does anyone know if there is a way to submit a form using a <a> tag.

[BlobFisk]

Hey RooLord,

You can do this using JavaScript:

<a href="somePage.html" title="Link to Submit the Form" onclick="document.myFormName.submit(); return false">

The onclick event is submitting the form. The reason I put the return false is to override the default behaviour of the <a> (in this case navigating to somePage.html).

So, why put an address in the href? Accessibility. Many screen readers will not activate the javascript event.

HTH

[RooLord]

Hi BlobFisk,

First of all thanks for the answer. Now i got another question.

Can i pass extra arguments to the form?

By submitting the form all values will be posted, but in the case i need to either specify an extra argument like?(formdata)&button=login. Can i use the href to override the action from form or no?

And if no where could i had that extra argument?

Also, the reason why i posted saying without the use of javascripting is because some browser don't have javascripting support. I believe IE and Netscape do by others like mozilla or others. Do you know of any problems due to lake of compatibility with javascripting and browsers?

Thanks a million...

[BlobFisk]

For an extra arguement would it not be best to use a hidden input field?

<input type="hidden" name="someHiddenFieldName" id="someHiddenFieldID" value="someValue">

Or in a server side language environment:

<input type="hidden" name="someHiddenFieldName" id="someHiddenFieldID" value="<%=something %>">

As for the non use of javascript, I have to admit to missing this in the title! :( Other than using only an submit button, there is no easy way to submit a form without using a sript.

HTH

[macdave]

Not sure if this is exactly what you're trying to achieve, but you could style your submit button to look like a link:

<input type="submit" value="foo bar bap bam" style="border: 0px; margin: 0px; padding: 0px; background-color: #fff; color: #00f; text-decoration: underline;">

[caspita]

Hi macdave ... this is an excellent tick! .. can something be done also so when the mouse is over the button it switch the pointer? I guess it will involve javascript but if can be done I'd like to know how.

Thank!

[macdave]

You can do that with CSS too. Just add

cursor: pointer; cursor: hand;

(both declarations are necessary for semi-reliable cross-browser support)

[caspita]

Thanks mcdave! Now I'm going to change a lot of my buttons using this ;-) ... this gives a more profesional finishig to the web pages and you can handle the most standard form processing ;-)

Thanks!

[BlobFisk]

madaves idea is very nice but one caveat with it is that there will be no hover state on the link. If the rest of your links are styles to colour sway on mouse over then this will not emulate this behaviour.

You can do this in CSS:

input.submitButton { styles to make it look like a link }

input:hoverButton { hover style }

Used a class to mean that only your submit inputs get styled - not all inputs!

This however will not work in IE which does not support the :hover pseudoclass on anything other than anchors.

The long way around is to do this:

<input type="submit" value="foo bar bap bam" style="...style rules" onmouseover="this.style='..hover style rules...';" onmouseout='this.style='...style rules...'>

You need to use the mouseout event to clear the style added on the mouseover event.

HTH