
A więc tak mam taki formularz:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> form#multiphase{ border:#000 1px solid; padding:24px; width:350px; } form#multiphase > #phase2, #phase3, #show_all_data{ display:none; } </style> <script> var fname, gender, country; function _(x){ return document.getElementById(x); } function processPhase1(){ fname = _("firstname").value; if(fname.length > 2){ _("phase1").style.display = "none"; _("phase2").style.display = "block"; _("progressBar").value = 33; _("status").innerHTML = "Phase 2 of 3"; } else { alert("Please fill in the fields"); } } function processPhase2(){ gender = _("gender").value; if(gender.length > 0){ _("phase2").style.display = "none"; _("phase3").style.display = "block"; _("progressBar").value = 66; _("status").innerHTML = "Phase 3 of 3"; } else { alert("Please choose your gender"); } } function processPhase3(){ country = _("country").value; if(country.length > 0){ _("phase3").style.display = "none"; _("show_all_data").style.display = "block"; _("display_fname").innerHTML = fname; _("display_gender").innerHTML = gender; _("display_country").innerHTML = country; _("progressBar").value = 100; _("status").innerHTML = "Data Overview"; } else { alert("Please choose your country"); } } function submitForm(){ _("multiphase").method = "get"; _("multiphase").action = "my_parser.php"; _("multiphase").submit(); } </script> </head> <body> <progress id="progressBar" value="0" max="100" style="width:250px;"></progress> <form id="multiphase" onsubmit="return false"> <div id="phase1"> </div> <div id="phase2"> Gender: <select id="gender" name="gender"> </div> <div id="phase3"> Country: <select id="country" name="country"> </div> <div id="show_all_data"> </div> </form> </body> </html>
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ę
. 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ć?
if(fname.length > 2){ _("phase1").style.display = "none"; ...
Już sam doszedłem do tego. Temat do zamknięcia
function processPhase1(){ fname = _("firstname").value; if(fname.length > 2){ _("phase1").style.display = "none"; _("phase2").style.display = "block"; } else if (fname.length == 0) { _("phase1").style.display = "none"; _("phase9").style.display = "block"; } }