---
title: "Länk istället för submit-knapp?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/184550-länk-istället-för-submit-knapp"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Guldstrand"
published: "2010-09-06T11:30:17.000Z"
updated: "2010-09-09T14:06:04.000Z"
replies: 22
views: 1989
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/184550-länk-istället-för-submit-knapp"
---

# Länk istället för submit-knapp?

_Sida 1 av 2._

## #1 — Guldstrand, 2010-09-06T11:30Z

Hur löser jag det enklast, om jag vill ha en länk istället för en submit-knapp i ett formulär?

Permalänk: https://www.webforum.nu/p/184550

## #2 — voigtann1, 2010-09-06T11:35Z

Med javascript + events:

```
<a href="#" onclick="formName.submit()">...</a>
```

Där formname är formulärets namn, eller så kör du ett id på ditt formulär ock kör document.getElementById("formId")

Permalänk: https://www.webforum.nu/p/2250550

## #3 — StefanBergfeldt, 2010-09-06T11:58Z

Jag skulle nog rekommendera att ha knappen där, men dölja den med javascript, och lägga dit länken istället.

Annars tappar formuläret hela sin funktionalitet utan javascript aktiverat

Permalänk: https://www.webforum.nu/p/2250552

## #4 — Guldstrand, 2010-09-06T12:01Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1515763)**
>
> Med javascript + events:
>
>
> ```
> <a href="#" onclick="formName.submit()">...</a>
> ```
>
> Där formname är formulärets namn, eller så kör du ett id på ditt formulär ock kör document.getElementById("formId")

Tack för det snabba svaret.
Måste jag ha något *speciellt* i form-taggen, (förutom name-taggen)?

Orsaken till min fråga, är att inget i formuläret postas/sparas.

> **[StefanBergfeldt skrev:](https://www.webforum.nu/p/1515765)**
>
> Jag skulle nog rekommendera att ha knappen där, men dölja den med javascript, och lägga dit länken istället.
>
> Annars tappar formuläret hela sin funktionalitet utan javascript aktiverat

Hur menar du då?  :r

Permalänk: https://www.webforum.nu/p/2250553

## #5 — voigtann1, 2010-09-06T12:05Z

Håller med Stefan, att postar ett formulär skall man göra med en submit, du kan stylar om knappen till att se ut som en länk, eller döljar knappen med JS, för om dom inte har javascript aktiverat så kommer man inte kunna postar formuläret.

Nej, det är allt du behöver och självklart metod, action osv om du skall göra en POST, hur ser ditt formulär ut och kod i bakgrunden?

Permalänk: https://www.webforum.nu/p/2250554

## #6 — Ledel, 2010-09-06T12:08Z

> **[Guldstrand skrev:](https://www.webforum.nu/p/1515766)**
>
> Tack för det snabba svaret.
> Måste jag ha något *speciellt* i form-taggen, (förutom name-taggen)?
> 
> Orsaken till min fråga, är att inget i formuläret postas/sparas.
> 
> 
> Hur menar du då?  :r

1\. Nej, du behöver inte ha något speciellt i form-taggen förutom name. Om du inte vill köra med document.getElementById() istället, då behöver du ha med ett id-attribut.

2\. Om du har en submit-knapp "från början", exempelvis 

```
<div id="Holder"><input type="submit" value="Klicka här" /></div>
```

 istället för en länk så kan du med hjälp av javascript byta ut innehållet i #Holder för att istället visa en länk. Detta gör att formuläret fungerar även utan javascript. jQuery för att visa en länk istället:

```
$('#Holder').html('<a href="#" onclick="formName.submit()">...</a>');
```

Permalänk: https://www.webforum.nu/p/2250555

## #7 — nitro2k01, 2010-09-06T12:10Z

Stilla undran: Borde det inte gå att faktiskt använda en vanlig submit-knapp, men skala bort allt extra fluff med lite CSS, så att den ser ut som en länk?

Permalänk: https://www.webforum.nu/p/2250556

## #8 — Guldstrand, 2010-09-06T12:10Z

Själva formuläret ser ut som följer:

```php
	<form method="post" action="test.php" name="submit">
                	<ul class="forms">
                    	<li class="txt">Användarnamn <span class="greytxt">(Obligatoriskt)</span></li>
                        <li class="inputfield"><input name="wantusername" type="text" /></li>
                    </ul>
                    <ul class="forms">
                    	<li class="txt">E-postadress <span class="greytxt">(Obligatoriskt)</span></li>
                        <li class="inputfield"><input name="email" type="text" /></li>
                    </ul>
                    <ul class="forms">
                    	<li class="txt">Lösenord <span class="greytxt">(Obligatoriskt)</span></li>
                        <li class="inputfield"><input name="wantusername" type="password" /></li>
                    </ul>
                    <ul class="forms">
                    	<li class="txt">Bekräfta lösenord <span class="greytxt">(Obligatoriskt)</span></li>
                        <li class="inputfield">
                        	<input name="passagain" type="password" />
                        </li>
                    </ul>
                    <ul class="forms">
                    	<li class="txt">Kön</li>
                        <li class="radiobtns">
                       	  <input name="" type="radio" value="" /> <span>Kille</span><input name="" type="radio" value="" /> <span>Tjej</span>
                        </li>
                    </ul>
                    <ul class="forms">
                    	<li class="txt">Date of Birth</li>
                        <li class="jumpmenus">
                        	<select name="jumpMenu" id="jumpMenu" class="day" onchange="MM_jumpMenu('parent',this,0)">
                        		<option>Day</option>
                        	    <option>1</option>
                        	    <option>2</option>
                        	    <option>3</option>
                        	    <option>4</option>
                        	    <option>5</option>
                        	    <option>6</option>
                        	    <option>7</option>
                      	    </select>
                            <select name="jumpMenu2" id="jumpMenu2" class="month" onchange="MM_jumpMenu('parent',this,0)">
                                <option>Month</option>
                                <option>item1</option>
                                <option>item2</option>
                                <option>item3</option>
                            </select>
                            <select name="jumpMenu3" id="jumpMenu3" class="year" onchange="MM_jumpMenu('parent',this,0)">
                                <option>Year</option>
                                <option>item2</option>
                                <option>item3</option>
                            </select>
                        </li>
                    </ul>
                    <ul class="forms">
                    	<li class="txt">Country</li>
                        <li class="jumpmenus">
                        	<select name="jumpMenu4" id="jumpMenu4" class="country" onchange="MM_jumpMenu('parent',this,0)">
                        	    <option>Please Select</option>
                        	    <option>item2</option>
                        	    <option>item3</option>
                        	    <option>item4</option>
                      	    </select>
                        </li>
                    </ul>
                    <ul class="buttons">
                      <li class="right"><a href="test.php" class="ovalbutton contactbtn" onclick="signup.submit()"><span>Registrera</span></a></li>
                    </ul>
	</form>
```

(Koden som hanterar inputen, är bara några variabler för att se att formuläret postas.)

Permalänk: https://www.webforum.nu/p/2250557

## #9 — voigtann1, 2010-09-06T12:22Z

> **[nitro2k01 skrev:](https://www.webforum.nu/p/1515769)**
>
> Stilla undran: Borde det inte gå att faktiskt använda en vanlig submit-knapp, men skala bort allt extra fluff med lite CSS, så att den ser ut som en länk?

Precis

@Guldstrand: <http://voigt.se/sandbox/wf/jsform/> fungera för mig

Permalänk: https://www.webforum.nu/p/2250558

## #10 — Guldstrand, 2010-09-06T12:58Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1515771)**
>
> @Guldstrand: <http://voigt.se/sandbox/wf/jsform/> fungera för mig

Fungerar för mig med, **på länken du angav**.
Jag får det inte att fungera på min sida.  :(
Kan det bero på att jag inte postar till samma sida?

Permalänk: https://www.webforum.nu/p/2250562

## #11 — voigtann1, 2010-09-06T12:59Z

> **[Guldstrand skrev:](https://www.webforum.nu/p/1515776)**
>
> Kan det bero på att jag inte postar till samma sida?

Nej, du kan postar till vilken sida du vill, men a-elementet bör inte ha en href, då den kommer nog avbryta postningen, men överväg istället att stylar om knappen till att se ut som en länk, varför behöver du göra den till en länk?

Permalänk: https://www.webforum.nu/p/2250564

## #12 — Guldstrand, 2010-09-08T21:32Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1515778)**
>
> Nej, du kan postar till vilken sida du vill, men a-elementet bör inte ha en href, då den kommer nog avbryta postningen, men överväg istället att stylar om knappen till att se ut som en länk, varför behöver du göra den till en länk?

Jag ***måste*** absolut inte köra med en länk, men jag får inte till samma design på input-knappen.  :r \*suger på css\*

Kanske någon har tid/lust att hjälpa mig med att anpassa designen till input-knappen istället?

Här är delar av css-mallen som hanterar knappen:

```
ul.buttons {
	list-style:none;
	margin-top:10px;
	float:left;
	width:100%;
}
ul.buttons li{
	width:auto !important;
	float:left;
	border-bottom:none !important;
	padding-bottom:0px !important;
	padding-left:0px;
}
ul.buttons li.right{
	width:auto !important;
	float:right;
	border-bottom:none !important;
	padding-bottom:0px !important;
	padding-left:0px;
}
ul.buttons li.first{
	width:auto !important;
	border-bottom:none !important;
	padding-bottom:0px !important;
	padding-right:10px;
}
a.button {
	padding:0px 0px 0px 0px;
	margin:0px;
	background-image:url(../../../../cl102.justhost.com/404.shtml);
	background-repeat:no-repeat;
	background-position:left top;
	float:left;
	display:block;
	height:22px;
	text-decoration:none;
	font-weight:bold;
	vertical-align:middle;
	color:#454545;
	cursor:pointer;
}
.contactbtn {
	background-image:url(../images/button_left_contact.gif) !important;
	height:22px !important;
}

a.ovalbutton{

display: block;
float: left;
height: 24px; /* Height of button background height */
padding-left: 31px; /* Width of left menu image */
text-decoration: none;
font-weight:bold;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url(../images/button_right.gif) no-repeat top right;
display: block;
padding: 3px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
height:21px;
}
```

```php
<ul class="buttons">
<li class="right">
<a href="#" class="ovalbutton contactbtn" onclick="submit()"><span>Skicka</span></a>
</li>
 </ul>
```

Länk-knappen som jag har nu, ser ut som på den bifogade filen.

Bilagor:

- [skicka-knapp.png](https://www.webforum.nu/a/21977.png)

Permalänk: https://www.webforum.nu/p/2250738

## #13 — voigtann1, 2010-09-09T04:51Z

\<button type="submit class="ovalbutton contactbtn"\>\<span\>Skicka\</span\>\</button\>

Om du kan stylar om ett a-element så ser jag inga problem att du kan stylar om en knapp.

Permalänk: https://www.webforum.nu/p/2250740

## #14 — Guldstrand, 2010-09-09T10:44Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1515976)**
>
> \<button type="submit class="ovalbutton contactbtn"\>\<span\>Skicka\</span\>\</button\>
> 
> Om du kan stylar om ett a-element så ser jag inga problem att du kan stylar om en knapp.

Om jag ska vara helt ärlig, så har jag fått hel del hjälp med css-mallen, samt formulär-koden.

P.s. Det blev ingen skillnad med den koden du postade.

**EDIT:** Hittade mer som har med knappen att göra.

```
ul.forms li input.submit{
	height:22px;
	width:82px;
	background-image:url(../images/submit_contact.gif);
	background-repeat:no-repeat;
	background-color:transparent;
	border:none;
}
```

Bilagor:

- [skicka_knapp2.PNG](https://www.webforum.nu/a/21978.png)

Permalänk: https://www.webforum.nu/p/2250750

## #15 — voigtann1, 2010-09-09T10:51Z

du säger att input med klassen submit skall ha denna CSS, exempelkoden jag skrev är inte en input med en klass utan en button-element, du kommer nog inte kunna ta den rakt upp och ner, bordern på en button behöver nollas, men inte mycket mer än så skulle jag tror.

Permalänk: https://www.webforum.nu/p/2250752

## #16 — Guldstrand, 2010-09-09T11:00Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1515990)**
>
> du säger att input med klassen submit skall ha denna CSS, exempelkoden jag skrev är inte en input med en klass utan en button-element, du kommer nog inte kunna ta den rakt upp och ner, bordern på en button behöver nollas, men inte mycket mer än så skulle jag tror.

Fattar tyvärr inget av vad du skriver.  :r

Permalänk: https://www.webforum.nu/p/2250753

## #17 — voigtann1, 2010-09-09T11:03Z

```
ul.forms li input.submit
```

om du kör "min" kod så är det inte en input.submit utan den skall vara en button bara

```
ul.forms li button
```

Permalänk: https://www.webforum.nu/p/2250754

## #18 — Guldstrand, 2010-09-09T11:06Z

Ok...
Men har du tid/lust att hjälpa mig med att styla input-knappen?

Permalänk: https://www.webforum.nu/p/2250755

## #19 — voigtann1, 2010-09-09T11:14Z

skicka eller lägg upp alla bilder så man kan komma åt din CSS+bilder.

Permalänk: https://www.webforum.nu/p/2250756

## #20 — voigtann1, 2010-09-09T11:16Z

```
a.ovalbutton, button.ovalbutton{

display: block;
float: left;
height: 24px; /* Height of button background height */
padding-left: 31px; /* Width of left menu image */
text-decoration: none;
font-weight:bold;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton,
button:link.ovalbutton, button:visited.ovalbutton, button:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span, button.ovalbutton span{
background: transparent url(../images/button_right.gif) no-repeat top right;
display: block;
padding: 3px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
height:21px;
}
```

Permalänk: https://www.webforum.nu/p/2250757

---

Tråden på webben: https://www.webforum.nu/amne/html-css/184550-länk-istället-för-submit-knapp  
Nästa sida: https://www.webforum.nu/amne/html-css/184550-länk-istället-för-submit-knapp/page2.md