HTML & CSSur HTML, XHTML & CSS
22 svar · 1 966 visningar · startad av Guldstrand
Hur löser jag det enklast, om jag vill ha en länk istället för en submit-knapp i ett formulär?
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")
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
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.
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
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?
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>');
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?
Själva formuläret ser ut som följer:
<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.)
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
@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?
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?
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;
}
<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.
<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.
<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;
}
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.
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
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
Ok...
Men har du tid/lust att hjälpa mig med att styla input-knappen?
skicka eller lägg upp alla bilder så man kan komma åt din CSS+bilder.
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;
}