How to send a form by clicking on the link?

This question is probably in the TOP10 questions on the forums :) Most likely this is a requirement of the designer or customer.

So, the solution, at first glance, is simple:

< a href = "#" onclick = "document.getElementById ('myform'). submit (); return false;" > Submit < / a >

')
But it immediately appears (oddly enough :) the next question is this, what if JS is turned off by the visitor?

Change our code to:

< input type = "submit" value = "send" class = "link" / >

And add some js:

addEvent ( window , 'load' , windowLoad ) ;

/ * Cross-browser adding event handler * /
function addEvent ( obj , evType , fn ) {
if ( obj. addEventListener ) {
obj. addEventListener ( evType , fn , false ) ;
} else if ( obj. attachEvent ) {
obj. attachEvent ( 'on' + evType , fn ) ;
}
}

/ * Get the parent form for the element * /
function getParentForm ( obj ) {
while ( ( obj = obj. parentNode ) ) {
if ( obj. nodeName == 'FORM' ) {
break ;
}
}
return obj ;
}

/ * We are looking for all submit buttons with the link class and replacing them with links * /
function windowLoad ( ) {
var buttons = document. getElementsByTagName ( 'input' ) ;
for ( var i = 0 ; i < buttons. length ; i ++ ) {
if ( buttons [ i ] . getAttribute ( 'type' ) == 'submit' && buttons [ i ] . className == 'link' ) {
var link = document. createElement ( 'a' ) ;
link. appendChild ( document. createTextNode ( buttons [ i ] . getAttribute ( 'value' ) ) ) ;
link. setAttribute ( 'href' , '#' ) ;
addEvent ( link , 'click' , linkClick ) ;

var parent = buttons [ i ] . parentNode ;
parent. removeChild ( buttons [ i ] ) ;
parent. appendChild ( link ) ;
}
}
}

/ * We send the form by clicking on the link * /
function linkClick ( e ) {
var e = window. event || e ;
var target = e. target || e. srcElement ;
var parentForm = getParentForm ( target ) ;
parentForm. submit ( ) ;

if ( window. event ) { e. returnValue = false ; } else { e. preventDefault ( ) ; }
}

Now, if JS is disabled, the visitor will see a button instead of a link and will still be able to submit the form. But we will not stop there. Make the button look like a link even if JS is disabled. In order to style the button, we change the tag to button , and the span needed in order to add underline text in Firefox.

< button type = "submit" class = "link" > < span > Send < / span > < / button >

Also change the js part accordingly.

var buttons = document. getElementsByTagName ( 'button' ) ;
for ( var i = 0 ; i < buttons. length ; i ++ ) {
if ( buttons [ i ] . getAttribute ( 'type' ) == 'submit' && buttons [ i ] . className == 'link' ) {
var link = document. createElement ( 'a' ) ;
link. appendChild ( document. createTextNode ( buttons [ i ] . firstChild . firstChild . nodeValue ) ) ;

CSS will look like this:

button .link {
/ * The first two properties are needed to remove indents in IE * /
overflow : visible ;
width : auto ;

/ * Remove indents * /
margin : 0 ;
padding : 0 ;

/ * Remove all button design elements * /
background : none ;
border : none ;

/ * Normal link cursor * /
cursor : pointer ;
}

/ * Link is usually underlined * /
button .link span {
color : # 00f ;
text-decoration : underline ;
}

For Firefox, you can also add -moz-user-select: text; so that the text of the button can be highlighted, but I doubt the need.

The rest of the styles will depend on the specific design.

A few notes:

1. The pseudo-classes active, visited cannot be applied to the button, and for IE6 and hover
2. In IE6, several buttons for one form will not work normally.
3. You can do without JS. It all depends on how important the naturalness of the link is to you.

UPD
insa offered another very good option, the only disadvantage of which is that the label will not be able to get the focus.

< form >
< input type = "text" name = "a" / >
< input type = "submit" id = "push-me" style = "display: none" / >
< / form >

< label for = "push-me" > fake submit < / label >

UPD2
Unfortunately, the option proposed by insa is not cross-browser (read the comments).

Related Links:

1. HTML <button> Test
2. Styling buttons to look like links

A working example can be found here .