Använda länkar istället för submitknappar

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2008

Använda länkar istället för submitknappar

Jag har ett antal formulär som hör ihop på min webbsida. I nuläget kan man bläddra fram och tillbaka mellan formulären med två submitknappar längst ner på varje formulär. En submitknapp för framåt, och en för bakåt.

Jag vill istället att man ska submitta genom att klicka på länkar till de andra formulären, och komma direkt till det formulär man önskar. När man klickar på en länk till ett annat formulär, så submittas först formuläret man befinner, precis på samma sätt som om man trycker på en submitknapp.

Sedan kan jag se vilken länk användaren tryckt på, och göra så att denne kommer till dit efter att formulärets submittats.

I nuläget ser det ut såhär längst ner på formuläret, beroende på vilken submitknapp användaren tryckt på, så förs de till den sidan:

<input type="submit" name="personalData" value="<- Personal Data" /> <input type="submit" name="family" value="Family ->" />

Jag vill att det ska se ut såhär överst på sidan:

<div id="tabs"> <a href="personalinformation.php">Personal Data</a> </div> <div id="tabs"> <a href="family.php">Family</a> </div>

Det vill säga istället för att klicka på submitknappar längst ner, så kan användare klicka på länkar, som submittar formuläret.

Därmed kan jag göra så att användare kan klicka på vilket formulär användaren vill direkt, istället för att behöva bläddra sig fram och tillbaka med submitknappar. Detta är en del av ett skolprojekt så jag uppskattar verkligen hjälp!

//Tack på förhand!

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008

jscript : onclick="this.form.submit()"

Ska vara något sånt:)

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2008

Tack för svar! onclick="this.form.submit()" var nice, men funkar väl bara om jag har en knapp eller liknande?

Jag vill ju ha så att t.ex. texten "Personal information" blir en knapp. Så jag kan ha flera länkar till olika formulär. Jag vill klicka på texten precis som en länk, fast det egentligen är en submitknapp.

Måste jag göra om texten till en input type="image", så att det blir som en button? och sedan skriva onclick="this.form.submit()" på den bilden?

typ: <input type="image" name="personalinformation" src="personalinformation.jpg" onclick="this.form.submit()"/>

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Okt 2004

Tror det här funkar...

<a href='javaScript:document.FORM_NAME.submit()'>Submit</a>

Q6600 @ 3.2GHz | 2*4 Corsair XMS2 5-5-5-12 @ 1003 | Club3D HD4850 | Asus P5Q Pro

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av Rhec
Tack för svar! onclick="this.form.submit()" var nice, men funkar väl bara om jag har en knapp eller liknande?

Jag vill ju ha så att t.ex. texten "Personal information" blir en knapp. Så jag kan ha flera länkar till olika formulär. Jag vill klicka på texten precis som en länk, fast det egentligen är en submitknapp.

Måste jag göra om texten till en input type="image", så att det blir som en button? och sedan skriva onclick="this.form.submit()" på den bilden?

typ: <input type="image" name="personalinformation" src="personalinformation.jpg" onclick="this.form.submit()"/>

Det lilla JS-fulhacket kan vara jobbigt för de som sitter med avaktiverat JS. Dåligt för användbarheten.

Du skulle däremot kunna använda CSS för att få knapparna att se ut och bete sig som länkar. Väldigt lätt att göra. Exempel:

<!DOCTYPE html> <title>Button test</title> <style> .linkbutton{ border: 0; background: transparent; font: inherit; padding: 0; display: inline; /* Ersätt med länkstil */ color: #00c; text-decoration: underline; cursor: pointer; } .linkbutton:hover{ color: #c00; } .linkbutton:active{ outline: 1px dotted black; } </style> <button class="linkbutton" type="submit">Submit</button>

Detta är även mer semantiskt korrekt än att JS-hacka länkar, formulär ska egentligen alltid skickas med hjälp av knappar (alternativs automatiskt med någon JS-callback).

Trädvy Permalänk
Medlem
Plats
Östersund
Registrerad
Maj 2005

Jag skulle också ha kört CSS för att få knappar att se ut som länkar.

Använd Yous lösning, plus detta för att få knapp-utseendet att försvinna helt (firefox har en skum padding som bara försvinner med detta lilla hack):

input::-moz-focus-inner{padding:0;border:none}

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2008

tack för all hjälp!

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2008
Citat:

Ursprungligen inskrivet av Matte Hedström
Tror det här funkar...

<a href='javaScript:document.FORM_NAME.submit()'>Submit</a>

Det där funkar prima!

Dock vill jag att länken inte bara ska submitta formuläret, den ska ju också ta användaren till den nya sidan!

Om jag använder submitknappar kan jag ju se vilken submitknapp användaren tryckt på genom att ge de olika submitknapparna namn, som sedan följer med som $_POST variabler. Hur kan jag veta vilken länk användaren tryckt på efter att användaren submittat formuläret?

Hur gör jag så att länken först submittar formuläret, och sedan tar användaren till den nya sidan?

Typ såhär:

<a href='javaScript:document.FORM_NAME.submit()'>Telefon</a> + header("Location: telefon.php");

//Tack på förhand igen!

Trädvy Permalänk
Medlem
Plats
Östersund
Registrerad
Maj 2005
Citat:

Ursprungligen inskrivet av Rhec
Det där funkar prima!

Dock vill jag att länken inte bara ska submitta formuläret, den ska ju också ta användaren till den nya sidan!

Om jag använder submitknappar kan jag ju se vilken submitknapp användaren tryckt på genom att ge de olika submitknapparna namn, som sedan följer med som $_POST variabler. Hur kan jag veta vilken länk användaren tryckt på efter att användaren submittat formuläret?

Hur gör jag så att länken först submittar formuläret, och sedan tar användaren till den nya sidan?

Typ såhär:

<a href='javaScript:document.FORM_NAME.submit()'>Telefon</a> + header("Location: telefon.php");

//Tack på förhand igen!

Om du använder vanliga <input type="submit" /> (vi har ju redan visat hur man förvandlar utseendet till vanliga länkar) så kan du i PHP kolla vilken av knapparna man tryckt på med hjälp av knappens namn. De submit-knappar man inte tryckt på hamnar nämligen inte i $_POST-variabeln alls.