css button not sumbitting form

[PippyLu]

I have a css button that I am trying to use to submit a basic php/javascript contact form. However, while everything looks right, the button doesn't submit the form when clicked.

Here's the code on the css button:

<a class="button2" href="#" onclick="this.blur(); return false; this.form.submit();"><span>Send Feedback</span></a>

This is the old way I did it and it works fine:

<input type=image src="images/send.gif" alt="Send" width="129" height="24" border="0">

Any thoughts?

[mortimer]

why have you chosen to use a link rather then an input to submit the form?

[jimfraser]

You are returning (false) before submitting the form. So the form never gets submitted.

fixed

onclick="this.blur();this.form.submit();return false;"

I agree with mortimer that you should probably use a <input type="submit"> instead of a link.

[PippyLu]

Can I still use my css button with the input type? I tried that and couldn't get it to apply the css.

[mortimer]

Depends what you are trying to do really, you might have more luck using the button tag (see below), this will have default styles to look like a normal button but you can change the styles with css.

<button type="submit">Send Feedback</button>

[PippyLu]

I am using a css for a rounded button, tutorial found here:
http://www.oscaralexander.com/tutori...-with-css.html

Here's my css:

a.button2 {
background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
color: #fff;
display: block;
float: right;
height: 24px;
margin-right: 10px;
padding-right: 10px; /* sliding doors padding */
font-size: 15px; font-weight: bold; font-family: TREBUCHET MS, Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none
}
a.button2 span {
background: transparent url('images/bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 4px 0px 6px 10px;
}
a.button2:hover {
background-position: bottom right;
color: #fff;
outline: none; /* hide dotted outline in Firefox */
}

a.button2:hover span {
background-position: bottom left;
padding: 4px 0px 6px 10px; /* push text down 1px */
}

I tried to apply the css to the button and input tags but it didn't take. Moving the false to the end of the page didn't work either.

My page is here:
http://www.creativemetaphor.com/clie..._site/form.php

[jimfraser]

whoops, it won't submit because .form is not a property of the <a> element.

replace
this.form.submit();
with
document.forms[0].submit();

[PippyLu]

That did it! Thanks!!!!!!!!

[mortimer]

The css to make the form work with a button

.button2 {
	background:transparent url(http://www.creativemetaphor.com/clients/iris/scion_site/images/bg_button_a.gif) no-repeat scroll right top;
	border:0pt none;
	color:#FFFFFF;
	float:right;
	font-family:TREBUCHET MS,Verdana,Arial,Helvetica,sans-serif;
	font-size:15px;
	font-weight:bold;
	height:24px;
	margin:0pt 10px 0pt 0pt;
	text-decoration:none;
}

.button2 span {
	background:transparent url(http://www.creativemetaphor.com/clients/iris/scion_site/images/bg_button_span.gif) no-repeat scroll left top;
	line-height:14px;
	padding:3px 0px 6px 10px;
}

.button2:hover {
    background-position: bottom right;
    color: #fff;
    outline: none; /* hide dotted outline in Firefox */
}

.button2:hover span {
    background-position: bottom left;
    padding: 3px 0px 1px 10px;
}

and the button tag should look like

<button type="submit" class="button2"><span>Send Feedback</span></button>