Formularz wieloetapowy/krokowy, Jak to zrobić w najbardziej optymalny sposób? Opcje

[jurcio6]

Witam,

Mam problem - potrzebuję sklecić na moją stronę formularz dodawania ankiet. Wymyśliłem sobie, że będzie on miał kilka etapów - kolejnych kroków:
Krok 1. Wpisanie tytułu ankiety, opisu, ilości pytań itp.
Krok 2. Wpisanie treści pytań i określenie ilości odpowiedzi dla każdego z nich.
Krok 3. Wpisanie odpowiedzi dla każdego z pytań.
Krok 4. Podsumowanie (wyświetlenie całej ankiety).
Krok 5. Zapis do bazy i zakończenie.

Wiem jak to wszystko sklecić, natomiast problem mam następujący: jak najlepiej przekazywać dane do kolejnych formularzy? Jaśniej: uzupełniam w pierwszym kroku tytuł, opis, ilość pytań i teraz po przejściu do drugiego kroku muszę wykorzystać te przesłane z 1 kroku dane (np. ilość pytań aby móc wyświetlić odpowiednią ilość boxów do wpisania pytań) - z tym nie ma problemu, wiadomo $_POST['***'] i te zmienne są dostępne. Problem natomiast jest taki, że chcę, aby te dane przesłane zostały znów dalej do kolejnych kroków (w tym wypadku dane z kroku 1 i dane z kroku 2 mają być dostępne w kroku 3 itd aż do końca formularza, gdzie mają zostać zapisane transakcją do BD). Jak to zrobić? Wykorzystanie pól hidden chyba nie ma zbytnio sensu, ponieważ liczba przesyłanych pól formularza może być bardzo różna, a wszystko ma być generowane dynamicznie...

Dodatkowo chciałbym jeszcze dodać możliwość 'dowolnego skakania po krokach', czyli np. z kroku 3 mogę cofnąć się do kroku 2, a wtedy skrypt w pola formularza kroku 2 wczytuje te dane, które wcześniej wpisałem i daje możliwość ich edycji. Kolejny problem, jaki mi przychodzi do głowy, to sytuacja kiedy: wpisuje dane w kroku 3, wciskam "wstecz", aby cofnąć się do kroku 2 i.. dane z kroku 3. szlag trafia, bo nie wdusiłem "dalej", tylko wstecz..

Proszę o pomoc - jako to ugryźć?

PS. Dodam, iż korzystam z logowania i sesji, ale nie bardzo mam pomysł, jak mógłbym to wykorzystać. A może lepiej zapis do tymczasowej tabeli po każdym kroku?

Ten post edytował jurcio6 15.01.2011, 12:58:10

[tehaha]

zapisuj odpowiedzi w sesji

[celbarowicz]

jak wyżej czyli:
session_start();
$_SESSION['dana_x']=$_POST['dana_x']

i $_SESSION['dana_x'] dostępne jest we wszystkich plikach (oczywiście session_start()(IMG:style_emoticons/default/winksmiley.jpg)

ponadto w formularzu


if(!isset($_SESSION['dana_x'])){$_SESSION['dana_x'] ="";}


<input type="text" value="<?php echo $_SESSION['dana_x']; ?>" >

Ten post edytował celbarowicz 15.01.2011, 13:28:19

[posiadacz]

Witam,
jestem odmiennego zdania.

Stworzyłbym jeden element form zawierający kilka sekcji pokazywanych/ukrywanych javascriptem.
Dodatkowo aby działały klawisze dalej i wstecz w przeglądarce do każdego kroku dodawałbym #numer_kroku.

[Kshyhoo]

Jestem podobnego zdania, zrobiłbym coś takiego:

[PHP] pobierz, plaintext 
switch (strip_tags($_GET['go'])) {
	default:
		 echo '<form name="generator" action="?go=1" method="POST">
			<input type="hidden" name="krok" value="1">  
			<input type="submit" name="dalej" value="Idź dalej"></form>';
	break;
//////////////////////////////////// KROK 1 ////////////////////////////////////
	case '1':
		echo 'Krok 1';
		echo '<form name="generator" action="?go=2" method="POST">';
		// tu inkludowany plik krok1.php
		echo '<input type="hidden" name="krok" value="2">  
			<input type="submit" name="dalej" value="Idź dalej"></form>';
		break;
//////////////////////////////////// KROK 2 ////////////////////////////////////
	case '2':
		echo 'Krok 2';
		echo '<form name="generator" action="?go=3" method="POST">';
		// tu inkludowany plik krok2.php
		echo '<input type="hidden" name="krok" value="3">  
			<input type="submit" name="dalej" value="Idź dalej"></form>';
	break;
}
[PHP] pobierz, plaintext 

No i sesje...

[celbarowicz]

dlaczego GET a nie POST

[posiadacz]

Chyba ktoś nie doczytał... (IMG:style_emoticons/default/winksmiley.jpg) miałem na myśli elementy formularza pokazywane z poziomu javascriptu.
Czyli:

[HTML] pobierz, plaintext 
<form>
<div id="step1">
<input />
</div>
<div id="step2">
<input />
</div>
</form>
 
<script>
$('#step1').show();
$('#step2').hide();
</script>
[HTML] pobierz, plaintext 

Ubrać to ładnie w funkcje i jazda.
Zerknij np tu:
http://www.domoklik.pl/pl/dodaj-oferte

Jestem podobnego zdania, zrobiłbym coś takiego:

[PHP] pobierz, plaintext 
switch (strip_tags($_GET['go'])) {
	default:
		 echo '<form name="generator" action="?go=1" method="POST">
			<input type="hidden" name="krok" value="1">  
			<input type="submit" name="dalej" value="Idź dalej"></form>';
	break;
//////////////////////////////////// KROK 1 ////////////////////////////////////
	case '1':
		echo 'Krok 1';
		echo '<form name="generator" action="?go=2" method="POST">';
		// tu inkludowany plik krok1.php
		echo '<input type="hidden" name="krok" value="2">  
			<input type="submit" name="dalej" value="Idź dalej"></form>';
		break;
//////////////////////////////////// KROK 2 ////////////////////////////////////
	case '2':
		echo 'Krok 2';
		echo '<form name="generator" action="?go=3" method="POST">';
		// tu inkludowany plik krok2.php
		echo '<input type="hidden" name="krok" value="3">  
			<input type="submit" name="dalej" value="Idź dalej"></form>';
	break;
}
[PHP] pobierz, plaintext 

No i sesje...

[Kshyhoo]

dlaczego GET a nie POST

Wysyłasz POSTem, odbierasz GETem...

[jurcio6]

Zapisywanie tego wszystkiego w sesji to trochę jak z motyką na słońce... a niech ktoś zrobi sobie ankietę z 20 pytaniami i do każdego pytania doda 4 odpowiedzi - w sumie do zapisania ponad 100 pól - moim zdaniem niezbyt sprytnie by to działało..

Myślałem właśnie bardziej o jednym pliku na switchu, coś jak podsunął mi Kshyhoo. Z tym że tam i tak bym musiał chyba zapisywać dane z case'a 1 do sesji przed przejściem do kolejnych kroków?

Posiadacz, czy mógłbyś mi trochę przybliżyć ten Twój sposób. A co jeśli ktoś używa przeglądarki z wyłączoną Javą? No i kluczowa kwestia: jak mam udostępnić wartości z formularza z kroku 1 w formularzu z kroku 2 poprzez samo ukrywanie/pokazywanie warstw? Mało tego, jak mam z tych wartości wygenerować coś (np. odpowiednią liczbę pól w formularzu)? Nie ma przecież możliwości, żeby dopiero teraz przesłać te wartości z Javy do PHP i żeby dopiero wtedy wygenerować odpowiednią ilość pól, bo strona nie wczytuje się na nowo.. W związku z tym musiałbym te wartości chyba jakoś odczytywać Javą z pól.. nie wiem, nie mam pomysłu. W moim wypadku miałoby to wyglądać tak: wpisuje w pierwszym kroku ilość pytań w ankiecie, a w drugim kroku ma mi się pojawić tyle boxów, ile zadeklarowałem pytań w kroku1. Czy dałoby się to zrobić? Jak mniej więcej..

Ogólnie wolałbym tego wszystkiego uniknąć - nie znam JS (IMG:style_emoticons/default/smile.gif) Jestem w stanie to i owo przekminić, wiadomo, ale nie do tego stopnia, żeby pisać w nim całe skrypty. No ale wydaje się to być najsprytniejszym rozwiązaniem (poza przypadkiem, że admin/ankieter może nie mieć JS i wtedy jest lipa po całości.. ale to tylko praca mgr, więc nie popadajmy w skrajności - ma po prostu działać (IMG:style_emoticons/default/tongue.gif)

EDIT: Znalazłem odpowiedź na część pytań pisząc po prostu taki skrypt, dlatego część posta wykasowałem/zmieniłem. Pozostają jeszcze inne pytania (powyżej).

Ten post edytował jurcio6 16.01.2011, 10:44:40

[posiadacz]

Bez znajomości JS będzie ciężko... (IMG:style_emoticons/default/sad.gif)
Elementami DOM można zarządzać z poziomu JS niezależnie od tego czy są widoczne czy ukryte.
W momencie uzupełniania pól w formularzu nr 1 uzupełniaj odpowiednie inputy, divy w formie nr 2. Możesz też odczytać je przy pokazywaniu kroku nr 2 - to zależy już od ciebie.
Kwestia JSa - mało osób go niema. Jeśli chcesz żeby działało też u nich musisz zrobić tak jak pisali inni, na sesji, ale też trzeba zrobić to z głową. Dobrze obsłużyć sytuację gdy user opuści formularz w połowie i wróci później np.

[jurcio6]

Zostanę więc przy JS - myślę, że jakoś dam radę (z dużą "odrobiną" pomocy (IMG:style_emoticons/default/smile.gif) ).

Na razie próbowałem coś takiego i działa w porządku:

[HTML] pobierz, plaintext 
<html>
<head>
 
<script type="text/javascript" language="JAVASCRIPT">
  function showhide(id1, id2) {
	document.getElementById(id1).style.display='none';
	document.getElementById(id2).style.display='block';
 }
</script>
 
</head>
<body>
<div style="display: block" id="ukryty1">
	<hr />
	<p>Oto treść diva 1.</p>
	<form id="formularz1" name="formularz1" action="ankieta.php" method="POST">
		pole 1: <input id="pole1" name="pole1" />
		pole 2: <input id="pole2" name="pole2" />
		<br />
		<a href="java script: showhide('ukryty1', 'ukryty2');">dalej</a>
	<hr>
</div>
 
<div style="display: none" id="ukryty2">
	<hr />
	<p>Oto treść diva 2.</p>
		pole 3: <input id="pole3" name="pole3" />
		pole 4: <input id="pole4" name="pole4" />
		<br />
		<a href="java script: showhide('ukryty2', 'ukryty1');">wstecz</a>
 
		<input type="submit" id="send" name="send" />
 
	</form>
	<hr>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
<?php
 
if(isset($_POST['send']))
{
	echo $_POST['pole1'].'<br />';
	echo $_POST['pole2'].'<br />';
	echo $_POST['pole3'].'<br />';
	echo $_POST['pole4'].'<br />';
}
else
	echo "Nie wypełniono formularza!";
 
?>
[PHP] pobierz, plaintext 

Problem pozostaje właśnie z tym, że: wysyłam w formularzu w kroku1 jakąś wartość (np. liczba pytań: N), a przez to w kroku2 generuje N boxów <input type="text">. No i z tych opcji, które podałeś, to myślę, że najlepiej byłoby odczytywać te wartości pól w momencie przejścia do kolejnego kroku - w trakcie wypełniania nie jest to potrzebne. Miałem też gdzieś taki prosty skrypcik js do sprawdzania, czy wszystkie pola zostały wypełnione, ale to już dorzucę na samym końcu.