Question

我正在尝试使用HTML和JavaScript创建多阶段表单。基本上在我的表单的一个阶段，我想根据给出的答案重定向表单。无论选择何种答案，该功能仅回馈第3阶段。

<!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>

Answer 1

您使用分配而不是检查ifs中的equllity：

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");
}

选中此plunker

根据答案重定向表单

1 个答案: