Just nu i M3-nätverket
Jump to content

Multiple show/hide med jquery


Cluster

Recommended Posts

Håller på och fipplar med ett formulär i flera steg och tänkta nyttja jquery (eftersom det ändå används på sidan ifråga) för att "bläddra" framåt och bakåt.

 

Besökaren skall alltså kunna fylla i värden i varje steg för att sedan klicka fortsätt för att komma till nästa för att i steg 4 kunna posta hela formuläret.

Formuläret är uppdelat i fyra steg (idag olika filer) med bakåt-/fortsättknappar i steg 2 och 3. I steg 1 är det reset/fortsätt och i steg 4 bakåt/submit.

 

Är verkligen inte någon klippa på javascript och jquery har jag bara börjat titta på så jag är tacksam för all hjälp!

Den markup som används ser förenklat ut såhär:

<form id="registerObjectForm" method="post">
<div id="formStepOne">
	<fieldset>
	<legend>Step 1</legend>
	<label for="Text1">Text 1:</label> <input type="text" name="Text1" id="Text1">
	</fieldset>
	<input type="reset" id="ResetButton" value=" Reset ">
	<input type="button" id="NextButton1" value=" Next >> ">
</div>
<div id="formStepTwo">
	<fieldset>
	<legend>Step 2</legend>
	<label for="Text2">Text 2:</label> <input type="text" name="Text2" id="Text2">
	</fieldset>
	<input type="button" id="BackButton2" value=" << Previous ">
	<input type="button" id="NextButton2" value=" Next >> ">
</div>
<div id="formStepThree">
	<fieldset>
	<legend>Step 3</legend>
	<label for="Text3">Text 3:</label> <input type="text" name="Text3" id="Text3">
	</fieldset>
	<input type="button" id="BackButton3" value=" << Previous ">
	<input type="button" id="NextButton3" value=" Next >> ">
</div>
<div id="formStepFour">
	<fieldset>
	<legend>Step 4</legend>
	<label for="Text4">Text 4:</label> <input type="text" name="Text4" id="Text4">
	</fieldset> 
	<input type="button" id="BackButton4" value=" << Previous ">
	<input type="submit" id="SubmitButton" value=" Slutför ">
</div>
</form>

När sidan laddas skall alltså formStepOne visas.

Det vore även tacksamt att enkelt kunna visa samtliga steg (för ev. retur från serverside indatakontroll).

Link to comment
Share on other sites

för att formuläret skall hålla utan javascript, får man nog lägga till "nästa/föregående"-knappar med jquery när sidan laddats.

 

De olika stegen skall nog inte behöva ha olika ID utan hellre samma cssclass

 

$(document).load(init);
init = function(){
$("#registerForm .panel").each(function(){
//$(this).append();
//lägga till nästa/föregknappar i varje
})
.hide(0,function(){
$("#registerForm .panel:eq(0)").show();
});

//funktionalitet för nästa föreg.knappar
$("button.next").live("click",function(){
var parent = $(this).parent();
parent.hide(0,function(){ parent.nextSibling(".panel").show() });
});
$("button.prev").live("click",function(){ });

}

Man får lägga till lite validering och sånt men du kanske kan bygga vidare på detta?

Link to comment
Share on other sites

för att formuläret skall hålla utan javascript, får man nog lägga till "nästa/föregående"-knappar med jquery när sidan laddats.
Ah, naturligtvis det glömde jag bort. Vill ju inte göra det omöjligt att fylla i/posta för de som inte tillåter script.

 

Man får lägga till lite validering och sånt [...]
Om du med validering menar av indata så används idag ketchup har ännu inte funderat på hur jag skall få ihop det men det får bli nästa huvudvärk.

 

[...] men du kanske kan bygga vidare på detta?
Hmmm... kanske, men än har jag inte fått snurr på det. Måste erkänna att jag nog gärna tar emot ett "komplett" fungerande exempel :blush:
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...