Forums / Developer / Why i should use buttons instead of links?

Why i should use buttons instead of links?

Author Message

Vytautas Germanavičius

Monday 13 June 2005 10:40:16 am

Can someone explain, whay this doeasn't work

<form method="post" action={"/content/action"|ezurl} name="newPhoto">
    <input type="hidden" name="NodeID" value="1180" />
    <input type="hidden"  name="ClassID" value="5" />        
    <a href="#" onclick="document.forms.newPhoto.submit()">Add Photo</a>
</form>

But if i change link with button, it works

<form method="post" action={"/content/action"|ezurl} name="newPhoto">
    <input type="hidden" name="NodeID" value="1180" />
    <input type="hidden"  name="ClassID" value="5" />        
<input type="submit" name="NewButton" value="{'Create here'|i18n('design/standard/node/view')}" />
</form>

{set-block scope=root variable=cache_ttl}0{/set-block}

Tom Couwberghs

Wednesday 15 June 2005 2:35:27 pm

I'm not entirely sure, but I believe the content/action script, needs the name of the submit-button to decide what action he will perform.

You can solve it like this:

-start from your working example
-hide the submit button with a touch of css (display:none)
-Make a link (with javascript) that will click your submit-button.

Hope this helps,

Tom

Vytautas Germanavičius

Thursday 16 June 2005 12:29:22 am

I solved problem in this way - i made hidden field instead of button. This works:

<form method="post" action={"/content/action"|ezurl} name="newPhoto">
    <input type="hidden" name="NodeID" value="1180" />
    <input type="hidden"  name="ClassID" value="5" />        
<input type="hidden" name="NewButton" value="{'Create here'|i18n('design/standard/node/view')}" />
    <a href="#" onclick="document.forms.newPhoto.submit()">Add Photo</a>
</form>

{set-block scope=root variable=cache_ttl}0{/set-block}

Maxime Thomas

Friday 03 March 2006 5:32:08 am

I found another solution. You can use the input image element :

<form action="/content/action" name="myform">
<input type="image" name="MyButton" src="logo.png" />
</form>

Rather than :

<form action="/content/action" name="myform">
<a href="javascript:document.myform.submit()">
<img src="logo.png"/>
</a>
<input type="hidden" name="MyButton"/>
</form>

Maxime Thomas
maxime.thomas@wascou.org | www.wascou.org | http://twitter.com/wascou

Company Blog : http://www.wascou.org/eng/Company/Blog
Technical Blog : http://share.ez.no/blogs/maxime-thomas

Xavier Dutoit

Friday 03 March 2006 6:04:07 am

I saw you found a solution, but to answer to your initial question:

everytime you have a from that perform an action that change the state of your system (add delete or modify), the W3C ask to use a post action (not a get, ie. not a link). This avoids, for instance, robots of the search engines creating zillions of drafts while indexing your site.

X+

http://www.sydesy.com