首先，这是小提琴：http://jsfiddle.net/6p45am8y/
当您收到表单的结尾时，您应该会看到一个确认页面。
<span id="display_fname"></span>
在第二页上正常工作（标题应显示您输入的名字），但在确认页面上不起作用。它只显示姓氏，我无法弄清楚原因。
另外，
<p>City: <span id="display_city"></span></p><br>
<p>State: <span id="display_state"></span></p><br>
<p>Zip: <span id="display_zip"></p></span><br>
<p>Date of Birth: <span id="display_birth"></span></p><br>
<p>Monthly Income: <span id="display_income"></span></p><br>
<p>Bank Account Number: <span id="display_account"></span></p><br>
<p>Routing Number: <span id="display_routing"></span></p><br>
...显示“未定义”，我不知道为什么会这样。
非常感谢任何帮助！
如果你需要它，这里是完整的HTML（我的js被硬编码到HTML中）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Tech Consulting, LLC.">
<link rel="icon" href="../../favicon.ico">
<title>Street Cred</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
<!--<style>
form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
form#multiphase > #phase2, #phase3, #show_all_data{ display:none; }
</style>-->
</head>
<body>
<div class="container">
<div class="header clearfix">
<i class="fa fa-chevron-circle-left fa-5x"></i>
<progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
<!--<progress id="progressBar" class="green glow" value="0" max="100" style="width:250px;"> -->
<span style="width: 40%" value="0" max="100"></span>
</progress>
<i class="fa fa-chevron-circle-right fa-5x"></i>
<div id="phase1a">
<div class="contact-greeting">
<h1>Let's get to know each other.</h1>
<p>Before we can get you the device you want, we need to know a little bit about you.</p>
</div>
</div>
<div id="phase2a">
<div class="contact-greeting">
<h1>Nice to meet you, <span id="display_fname"></span>! Next we need your current address.</h1>
<p>Providing your address helps us determine your loan amount.</p>
</div>
</div>
<div id="phase3a">
<div class="contact-greeting">
<h1>Tell us about your finances.</h1>
<p>Don't worry. Your information is not stored on this device or shared with any third parties.</p>
</div>
</div>
</div>
<div id="phase4a">
<div class="contact-greeting">
<h1>How do we get in touch with you?</h1>
<p>We'll send a copy of your application results to this email.<br>
Use your existing mobile phone number if possible.</p>
</div>
</div>
<div id="phase5a">
<div class="contact-greeting">
<h1>How much money did you want?</h1>
<p>Drag the slider to choose the amount that you want.</p>
</div>
</div>
<div id="show_all_dataa">
<div class="contact-greeting">
<h1>Is this information correct?</h1>
<p>Please click the back button to change any information.</p>
</div>
</div>
<div class="jumbotron">
<!-- <progress id="progressBar" value="0" max="100" style="width:250px;"></progress> -->
<!-- <progress id="progressbar" class="green glow" >
<span style="width: 40%" value="0" max="100"></span>
</progress> -->
<!-- <h3 id="status">Phase 1 of 3</h3> -->
<div id="form-main">
<div id="form-div">
<form id="multiphase" onsubmit="return false">
<!-- =====PHASE 1 INFORMATION===== -->
<div id="phase1">
<div class="names">
<p class="fname">First Name*</p>
<p class="lname">Last Name*</p>
</div>
<p>
<input name="fname" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="" id="fname" >
</p>
<p>
<input name="lname" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="" id="lname" >
</p>
<button onclick="processPhase1()" id="button-blue">Continue</button>
</div>
<!-- =====PHASE 2 INFORMATION===== -->
<div id="phase2">
<div class="address-label">
<p class="fname">Address 1*</p>
</div>
<p>
<input name="place" type="text" class="validate[required,length[0,100]] feedback-input" placeholder="" id="place" >
</p>
<div class="address-label">
<p class="fname">Address 2</p>
</div>
<p>
<input name="place2" type="text" class="validate[required,length[0,100]] feedback-input"placeholder="Apt, Ste, etc." id="place2" >
</p>
<div class="address-label">
<p class="city-label">City*</p><p class="state-label">State*</p><p class="zip-label">Zip*</p>
</div>
<div class="citystate">
<p>
<input name="city" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="" id="city" >
</p>
<p>
<select name="state" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="" id="state" ><option value="">
</option><option value="AK" >AK</option>
<option value="AL" >AL</option>
<option value="AR" >AR</option>
<option value="AZ" >AZ</option>
<option value="CA" >CA</option>
<option value="CO" >CO</option>
<option value="CT" >CT</option>
<option value="DC" >DC</option>
<option value="DE" >DE</option>
<option value="FL" >FL</option>
<option value="GA" >GA</option>
<option value="HI" >HI</option>
<option value="IA" >IA</option>
<option value="ID" >ID</option>
<option value="IL" >IL</option>
<option value="IN" >IN</option>
<option value="KS" >KS</option>
<option value="KY" >KY</option>
<option value="LA" >LA</option>
<option value="MA" >MA</option>
<option value="MD" >MD</option>
<option value="ME" >ME</option>
<option value="MI" >MI</option>
<option value="MN" >MN</option>
<option value="MO" >MO</option>
<option value="MS" >MS</option>
<option value="MT" >MT</option>
<option value="NC" >NC</option>
<option value="ND" >ND</option>
<option value="NE" >NE</option>
<option value="NH" >NH</option>
<option value="NJ" >NJ</option>
<option value="NM" >NM</option>
<option value="NV" >NV</option>
<option value="NY" >NY</option>
<option value="OH" >OH</option>
<option value="OK" >OK</option>
<option value="OR" >OR</option>
<option value="PA" >PA</option>
<option value="PR" >PR</option>
<option value="RI" >RI</option>
<option value="SC" >SC</option>
<option value="SD" >SD</option>
<option value="TN" >TN</option>
<option value="TX" >TX</option>
<option value="UT" >UT</option>
<option value="VA" >VA</option>
<option value="VT" >VT</option>
<option value="WA" >WA</option>
<option value="WI" >WI</option>
<option value="WV" >WV</option>
<option value="WY" >WY</option>
</select>
</p>
<p>
<input name="zip" type="text" class="validate[required,custom[onlyNumber],length[0,5]] feedback-input" placeholder="" id="zip">
</p>
</div>
<div class="address-label">
<p class="lived-label">How long have you lived there?*</p>
</div>
<p>
<select name="years" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="" id="years" ><option value=""></option>
<option value="0" >Less than 1 yr.</option>
<option value="3" >1 to 3 yrs.</option>
<option value="5" >3 to 5 yrs.</option>
<option value="10" >More than 5 yrs.</option>
</select>
</p><br>
<button onclick="processPhase2()" id="button-blue" class="button-pg-2">Continue</button>
</div>
<!-- =====PHASE 3 INFORMATION===== -->
<div id="phase3">
<div class="dob">
<div class="address-label">
<p class="birth-label">Date of birth*</p><p class="income-label">Monthly Income*</p>
</div>
<p>
<input name="birth" type="text" class="validate[required,custom[birth]] feedback-input" id="birth" placeholder="MM/DD/YYYY" >
</p>
<p>
<select name="income" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="" id="income" ><option value=""></option>
<option value="0" >Less than $1000.</option>
<option value="3" >$1200-$1500</option>
<option value="5" >$1500-$1700</option>
<option value="10" >$1700-$2000</option>
<option value="10" >More than $2000</option>
</select>
</p>
</div><br>
<div class="bank">
<div class="address-label">
<p class="birth-label">Bank Account Number*</p><p class="income-label">Routing Number*</p>
</div>
<p>
<input name="account" type="text" class="validate[required,custom[account]] feedback-input" id="account" placeholder="" >
</p>
<p>
<input name="routing" type="text" class="validate[required,custom[routing]] feedback-input" id="routing" placeholder="" >
</p>
<button onclick="processPhase3()" id="button-blue">Continue</button>
</div>
</div>
<!-- =====PHASE 4 INFORMATION===== -->
<div id="phase4">
<div class="email">
<div class="address-label">
<p class="birth-label">Email</p><p class="income-label">Confirm Email</p>
</div>
<p>
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="" >
</p>
<p>
<input name="emailconfirm" type="text" class="validate[required,custom[emailconfirm]] feedback-input" id="emailconfirm" placeholder="" >
</p>
</div>
<div class="phone">
<div class="address-label">
<p class="birth-label">Phone Number</p>
</div>
<p>
<input name="phone" type="text" class="validate[required,custom[onlyNumber],length[0,10]] feedback-input" id="phone" placeholder="" >
</p>
</div>
<button onclick="processPhase4()" id="button-blue">Continue</button>
</div>
<!-- =====PHASE 5 INFORMATION===== -->
<div id="phase5">
<div class="container-slider">
<div class="slider">
<output id="rangevalue">1000</output><br>
<div class="min-max"><p class="min">$500 Min</p><p class="max">$1500 Max</p></div>
<input type = "range" min="500" max="1500" step="10"onchange="rangevalue.value=value" id="range"/>
</div>
</div>
<div class="slider-cont">
<button onclick="show_all_data()" id="button-blue">Continue</button>
</div>
</div>
<!-- =====CONFIRMATION PHASE===== -->
<div id="show_all_data">
<p>Name: <span id="display_fname"></span> <span id="display_lname"></span> </p><br>
<p>Address: <span id="display_place"></span> <span id="display_place1"></span> </p><br>
<p>City: <span id="display_city"></span></p><br>
<p>State: <span id="display_state"></span></p><br>
<p>Zip: <span id="display_zip"></p></span><br>
<p>Date of Birth: <span id="display_birth"></span></p><br>
<p>Monthly Income: <span id="display_income"></span></p><br>
<p>Bank Account Number: <span id="display_account"></span></p><br>
<p>Routing Number: <span id="display_routing"></span></p><br>
<p>Email: <span id="display_Email"></span></p><br>
<p>Phone Number: <span id="display_phone"></span></p><br>
<button onclick="submitForm()" id="button-blue">Submit Data</button>
</div>
<!--<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>-->
</form>
</div>
</div>
</div>
<div class="row marketing-contact">
<p></p><br><br><br>
</div>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
<script>
var fname, lname, email, emailconfirm, phone, place, place2, city, state, zip, birth, account, income, routing, range;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
fname = _("fname").value;
lname = _("lname").value;
if(fname.length > 2 && lname.length > 2){
_("phase1").style.display = "none";
_("phase1a").style.display = "none";
_("phase2").style.display = "block";
_("phase2a").style.display = "block";
_("display_fname").innerHTML = fname;
<!-- _("display_lname").innerHTML = lname; -->
_("progressBar").value = 20;
} else {
alert("Please fill in the fields.");
}
}
function processPhase2(){
place = _("place").value;
if(place.length > 1){
_("phase2").style.display = "none";
_("phase2a").style.display = "none";
_("phase3").style.display = "block";
_("phase3a").style.display = "block";
_("progressBar").value = 40;
} else {
alert("Please make sure all fields are entered.");
}
}
function processPhase3(){
routing = _("routing").value;
if(routing.length > 1){
_("phase3").style.display = "none";
_("phase3a").style.display = "none";
_("phase4").style.display = "block";
_("phase4a").style.display = "block";
_("progressBar").value = 60;
} else {
alert("Please make sure all fields are entered.");
}
}
function processPhase4(){
email = _("email").value;
if(email.length > 0){
_("phase4").style.display = "none";
_("phase4a").style.display = "none";
_("phase5").style.display = "block";
_("phase5a").style.display = "block";
_("progressBar").value = 80;
} else {
alert("Please fill in everything.");
}
}
function show_all_data(){
email = _("email").value;
if(email.length > 0){
_("phase5").style.display = "none";
_("phase5a").style.display = "none";
_("show_all_data").style.display = "block";
_("show_all_dataa").style.display = "block";
_("display_fname").innerHTML = fname;
_("display_lname").innerHTML = lname;
_("display_place").innerHTML = place;
_("display_city").innerHTML = city;
_("display_state").innerHTML = state;
_("display_zip").innerHTML = zip;
_("display_birth").innerHTML = birth;
_("display_income").innerHTML = income;
_("display_account").innerHTML = account;
_("display_routing").innerHTML = routing;
_("display_email").innerHTML = email;
_("display_phone").innerHTML = phone;
_("display_range").innerHTML = range;
_("progressBar").value = 100;
_("status").innerHTML = "Data Overview";
} else {
alert("Please fill in everything.");
}
}
function submitForm(){
_("multiphase").method = "post";
_("multiphase").action = "insert_form.php";
_("multiphase").submit();
}
</script>
</html>
答案 0 :(得分：0)
您尚未设置显示为未定义的元素的值。例如，在processPhase2()中，您设置了place = _("place").value;，但没有字段捕获名为place的字段。并且，您从未设置city，state，zip的值。返回并重新访问每个部分，并确保存储这些值以供以后检索。