0
J'essaie de créer un formulaire multiphase en utilisant HTML et JavaScript. Fondamentalement dans une phase de ma forme je veux rediriger le formulaire basé sur la réponse donnée. La fonction ne restitue la phase 3 que peu importe la réponse choisie.rediriger le formulaire basé sur la réponse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Make An Appointment</title>
<style>
form#multiphase{border:#000 1px solid; padding:24px; width:350px;}
form#multiphase > #phase2, #phase3, #phase4, #phase5, #show_all_data{display:none;}
</style>
<script>
var FirstName, LastName, catagory;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
FirstName= _("FirstName").value;
LastName= _("LastName").value;
if(FirstName.length>2 && LastName.length > 2){
_("phase1").style.display ="none";
_("phase2").style.display="block";
} else {
alert("Please fill in the fields");
}
}
function gophase1(){
_("phase2").style.display="none";
_("phase1").style.display="block";
}
function processPhase2(){
catagory = _("catagory").value;
if(catagory ="Women"){
_("phase2").style.display = "none";
_("phase3").style.display = "block";
} else if(catagory ="Men"){
_("phase2").style.display = "none";
_("phase4").style.display = "block";
} else if(catagory = "Colour"){
_("phase2").style.display = "none";
_("phase5").style.display = "block";
} else{
alert("Please Choose a catagory");
}
}
</script>
</head>
<body>
<form id="multiphase" onsubmit="return false">
<div id="phase1">
First Name: <input id="FirstName" name="FirstName" /><br />
Last Name: <input id="LastName" name="LastName"/><br />
<button onclick="processPhase1()">Continue</button>
</div>
<div id="phase2">
Select a catagory <select id="catagory" name="catagory">
<option value="Women">Women's Styling</option>
<option value="Men">Men's Styling</option>
<option value="Colour">Colour & Highlights </option>
</select><br />
<button onclick="gophase1()">Back</button>
<button onclick="processPhase2()">Continue</button>
</div>
<div id="phase3">
Select a Style or Treatement women
<button onclick="gophase2()">Back</button>
</div>
<div id="phase4">
Select a Style or Treatment men
</div>
<div id="phase5">
Select a Style or Treatment colour
</div>