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

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ę
  1. if(fname.length > 2){
  2. _("phase1").style.display = "none";
  3. ...
. 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
  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. }