Page 1 of 1

Using CSS link/button to submit a form without javascript?

Posted: Fri Aug 27, 2010 10:26 am
by Jace
I'm using CSS to dynamically generate graphical buttons, like this:

Code: Select all

<a href='somewhere' class='myButton'>bla</a>
results in Image,

and similarly,

Code: Select all

<a href='somewhere' class='myButton'>something</a>
results in Image

So it's not just a static image (actually it consists of two parts: I have one small image for the left border, and one wide image which I use as background, right-aligned so it fits in - all common CSS trickery).

Now here's a problem. Sometimes I use buttons not just as normal links, but to submit a form. Currently I can only pull this off by using javascript:

Code: Select all

<a href='javascript:document.forms["myForm"].submit()' class='myButton'>click me plz!</a>
Works fine, except search bots can't follow this because now the link does not have a normal URL anymore.

Is there an alternative way to do this, without javascript, so that search bots understand the destination of this button (i.e. the form action), as is the case with normal <input type='submit'> buttons ?

I know the <button> tag, but does that allow me to completely restyle / replace the default html button with my own? Then there's <input type='image'> but as far as I understand that only works with static images. While my button images are dynamic, containing text, generated using CSS.

Is there some way to use another tag, which can submit a form (recognizable by search engines) and be CSS'ed into custom dynamic buttons like I'm doing with <a>?

Re: Using CSS link/button to submit a form without javascrip

Posted: Mon Aug 30, 2010 3:31 am
by phpcip28
You could try to bind the click event with jQuery:
This will allow you to have a normal form submitted on the click button. Robots could follow that I guess.

Code: Select all

$("#submit_button").click(function(){
    $("#form_id").submit();
});
And just have a regular form that would look something like:

Code: Select all

<form method="POST" action="http://www.somesite.com/some_url.php" id="form_id">
<!-- Your normal input fields -->

<!-- And your submit button like this -->
<a class='myButton' id="submit_button" style="cursor:pointer;">Submit This form</a>
</form>
You could also change your css to suite a normal <input type="submit" />

So you would have

Code: Select all

<form method="POST" action="http://www.somesite.com/some_url.php" id="form_id">
<input type='submit' value='Submit This form' class='myButton' id="submit_button" style="cursor:pointer;">
</form>

Re: Using CSS link/button to submit a form without javascrip

Posted: Wed Sep 01, 2010 9:29 am
by Jace
phpcip28 wrote:You could try to bind the click event with jQuery:
This will allow you to have a normal form submitted on the click button. Robots could follow that I guess.
(..javascript..)
And just have a regular form that would look something like:
(..html..)
Since robots ignore javascript and css, the class, id and style are not processed, and since there's no href at all there, I'd guess this boils down to:
this boils down to:

Code: Select all

<a>Submit This form</a>
And I doubt if any robot will follow that? :)
You could also change your css to suite a normal <input type="submit" />
Thanks, I didn't extensively experiment with css'ing a normal <input type='submit'/> button, but doesn't the browser-button always get generated there, regardless of what CSS you use?

Re: Using CSS link/button to submit a form without javascrip

Posted: Wed Sep 01, 2010 9:49 am
by pickle
The default browser/OS button appearance is only displayed if the <input> has no styling. You can easily style <input> elements.

Tying the form submission into Javascript (URL or not) is not the best idea for a non-captive audience, because it's fairly broken if the user doesn't have Javascript.

Re: Using CSS link/button to submit a form without javascrip

Posted: Wed Sep 01, 2010 10:03 am
by Jace
I wrote:Thanks, I didn't extensively experiment with css'ing a normal <input type='submit'/> button, but doesn't the browser-button always get generated there, regardless of what CSS you use?
Well, apparently it does, but I can "css that away", by adding border:none and adding my custom background image etc.

I almost got it to work perfectly now, except one thing.. I originally mentioned I created normal button links with <a class='button'>bla</a> but that's somewhat incomplete, in fact it's like this:

Code: Select all

<a class='button'><span>Bla</span></a>
And my stylesheet defines a.button to contain a stretching background (i.e. the dynamic sizing) + right button edge, and the span takes care of the left button edge.

I don't know how to do this with <input> though... I could also do it the other way round, i.e. the <input> between <span>..</span>, but then one part of the button isn't clickable.

Is there a way to get the span inside the <input type="submit">'s button caption??
(Tried <input class='button' type='submit'><span>Bla</span></input> but that didn't work unfortunately..)

Re: Using CSS link/button to submit a form without javascrip

Posted: Wed Sep 01, 2010 10:06 am
by Jace
pickle wrote:The default browser/OS button appearance is only displayed if the <input> has no styling. You can easily style <input> elements.
Thanks, yes I noticed that by experimenting some more (see my post after yours). Can I also style the 'caption' of the button, i.e. put something else on the button than just plain text?
Tying the form submission into Javascript (URL or not) is not the best idea for a non-captive audience, because it's fairly broken if the user doesn't have Javascript.
Good point - yet another reason (besides robot incompatibility) to get rid of the JS submissions!

Re: Using CSS link/button to submit a form without javascrip

Posted: Wed Sep 01, 2010 10:16 am
by pickle
If you want to have markup inside your form submission element, use the <button> element. Warning though that the <button> element is rendered slightly differently in almost every browser, so getting it to look identical everywhere is difficult.