Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX][JavaScript]Wielostopniowy formularz
ubatu
post 22.04.2017, 20:25:05
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 22.04.2017

Ostrzeżenie: (0%)
-----

Witam. Proszę Was o pomoc w przerobieniu tego formularza.Dopiero co zaczynam z JS i dlatego z góry przepraszam zadawanie idiotycznych pytań tongue.gif

A więc tak mam taki formularz:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <style>
  6. form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
  7. form#multiphase > #phase2, #phase3, #show_all_data{ display:none; }
  8. </style>
  9. <script>
  10. var fname, gender, country;
  11. function _(x){
  12. 	return document.getElementById(x);
  13. }
  14. function processPhase1(){
  15. 	fname = _("firstname").value;
  16.  
  17. 	if(fname.length > 2){
  18. 		_("phase1").style.display = "none";
  19. 		_("phase2").style.display = "block";
  20. 		_("progressBar").value = 33;
  21. 		_("status").innerHTML = "Phase 2 of 3";
  22. 	} else {
  23. 	    alert("Please fill in the fields");	
  24. 	}
  25. }
  26. function processPhase2(){
  27. 	gender = _("gender").value;
  28. 	if(gender.length > 0){
  29. 		_("phase2").style.display = "none";
  30. 		_("phase3").style.display = "block";
  31. 		_("progressBar").value = 66;
  32. 		_("status").innerHTML = "Phase 3 of 3";
  33. 	} else {
  34. 	    alert("Please choose your gender");	
  35. 	}
  36. }
  37. function processPhase3(){
  38. 	country = _("country").value;
  39. 	if(country.length > 0){
  40. 		_("phase3").style.display = "none";
  41. 		_("show_all_data").style.display = "block";
  42. 		_("display_fname").innerHTML = fname;
  43. 		_("display_gender").innerHTML = gender;
  44. 		_("display_country").innerHTML = country;
  45. 		_("progressBar").value = 100;
  46. 		_("status").innerHTML = "Data Overview";
  47. 	} else {
  48. 	    alert("Please choose your country");	
  49. 	}
  50. }
  51. function submitForm(){
  52. 	_("multiphase").method = "get";
  53. 	_("multiphase").action = "my_parser.php";
  54. 	_("multiphase").submit();
  55. }
  56. </script>
  57. </head>
  58. <body>
  59. <progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
  60. <h3 id="status">Phase 1 of 3</h3>
  61.  
  62. <form id="multiphase" onsubmit="return false">
  63.   <div id="phase1">
  64.     First Name: <input id="firstname" name="firstname"><br>
  65.        <button onclick="processPhase1()">Continue</button>
  66.   </div>
  67.   <div id="phase2">
  68.     Gender: <select id="gender" name="gender">
  69.       <option value=""></option>
  70.       <option value="m">Male</option>
  71.       <option value="f">Female</option>
  72.     </select><br>
  73.     <button onclick="processPhase2()">Continue</button>
  74.   </div>
  75.   <div id="phase3">
  76.     Country: <select id="country" name="country">
  77.       <option value="United States">United States</option>
  78.       <option value="India">India</option>
  79.       <option value="United Kingdom">United Kingdom</option>
  80.     </select><br>
  81.     <button onclick="processPhase3()">Continue</button>
  82.   </div>
  83.   <div id="show_all_data">
  84.     First Name: <span id="display_fname"></span> <br>
  85.     Gender: <span id="display_gender"></span> <br>
  86.     Country: <span id="display_country"></span> <br>
  87.     <button onclick="submitForm()">Submit Data</button>
  88.   </div>
  89. </form>
  90. </body>
  91. </html>
  92.  
[HTML] pobierz, plaintext

On dobrze działa,ale próbuję znaleźć rozwiązanie by go przerobić. W taki sposób by w razie jak nic nie zostanie wpisane w polu First Name, skrypt po kliknięciu Continue nie wyrzucał błąd alert("Please fill in the fields"). A uruchamiał nową funkcję np processPhase5, a poźniej przejsciu dalej wracał do processPhase2 jak w tym przykłądzie.
Próbowałem to osiągnąć przez zamianę 
[HTML] pobierz, plaintext 
  1. if(fname.length > 2){
  2. 		_("phase1").style.display = "none";
  3. 		...
[HTML] pobierz, plaintext
. Zamiast alerta w else podać kod kierujący do nowej funkcji. Oraz zmianę całego if na else if z dodatkowym warunkiem. Niestety za każdym razem nic z tego nie wyszło. Możecie podpowiedzieć jak sobie z tym poradzić?

Już sam doszedłem do tego. Temat do zamknięcia
[HTML] pobierz, plaintext 
  1. function processPhase1(){
  2. 	fname = _("firstname").value;
  3.  
  4. 	if(fname.length > 2){
  5. 		_("phase1").style.display = "none";
  6. 		_("phase2").style.display = "block";
  7.  
  8.  
  9. 	} else if (fname.length == 0) {
  10. 	    _("phase1").style.display = "none";
  11. 		_("phase9").style.display = "block";
  12.  
  13.  
  14. 	}
  15. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 06:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn