我正在尝试创建一个多页或多阶段表单，用户在其中填写几条信息，单击“继续”，然后获取更多信息来填写。我希望所有这些都在一页上完成一个网站，直到他们准备好提交他们输入的所有信息，所以我使用了一些教程来达到我现在的水平。它是使用 css 来显示第一个进程，并隐藏其他进程，直到单击“继续”按钮为止。然后它会隐藏第一个进程并显示第二个进程，依此类推，直到结束。
在第 43 行，“if(country.length > 1){”处，我从 Google Chrome 开发者工具中收到错误“无法读取未定义的属性‘length’”。据我所知，processPhase1 中的所有内容在语法方面与 processPhase2 相同。我想我已经在需要的地方定义了“国家”......所以我不知所措。
这是代码:
<!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'>
<style>
form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
form#multiphase > #phase2, #phase3, #show_all_data{ display:none; }
</style>
<script>
var name, email, phone, place, country, city, state, zip, routing;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
name = _("name").value;
if(name.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(){
country = _("country").value;
if(country.length > 1){
_("phase2").style.display = "none";
_("phase3").style.display = "block";
_("progressBar").value = 66;
_("status").innerHTML = "Phase 3 of 3";
} else {
alert("Please make sure all fields are entered.");
}
}
function processPhase3(){
routing = _("routing").value;
if(routing.length > 0){
_("phase3").style.display = "none";
_("show_all_data").style.display = "block";
_("display_name").innerHTML = name;
_("display_email").innerHTML = email;
_("display_phone").innerHTML = phone;
_("display_country").innerHTML = country;
_("display_routing").innerHTML = routing;
_("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>
</head>
<body>
<div class="container">
<div class="header clearfix">
<i class="fa fa-chevron-circle-left fa-5x"></i>
<i class="fa fa-chevron-circle-right fa-5x"></i>
<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 class="jumbotron">
<progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
<h3 id="status">Phase 1 of 3</h3>
<form id="multiphase" onsubmit="return false">
<div id="phase1">
<p id="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="First and Last Name" id="name" />
</p>
<p id="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p id="phone">
<input name="phone" type="text" class="validate[required,custom[onlyNumber],length[0,100]] feedback-input" id="phone" placeholder="Telephone Number" />
</p>
<button onclick="processPhase1()">Continue</button>
</div>
<div id="phase2">
<p id="country">
<input name="country" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Country" id="country" />
</p>
<p id="place">
<input name="place" type="text" class="validate[required,length[0,100]] feedback-input" placeholder="Address" id="place" />
</p>
<p id="city">
<input name="city" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="City" id="city" />
</p>
<p id="state">
<input name="state" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="State" id="state" />
</p>
<p id="zip">
<input name="zip" type="text" class="validate[required,custom[onlyNumber],length[0,5]] feedback-input" placeholder="Zip" id="zip" />
</p>
<button onclick="processPhase2()">Continue</button>
</div>
<div id="phase3">
<p id="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Questions or comments..."></textarea>
</p>
<button onclick="processPhase3()">Continue</button>
</div>
<div id="show_all_data">
Name: <span id="display_fname"></span> <br>
E-mail: <span id="display_email"></span> <br>
Phone: <span id="display_phone"></span> <br>
Address: <span id="display_country"></span> <br>
<button onclick="submitForm()">Submit Data</button>
</div>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</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>
</html>
最佳答案
p 标签对应的
DOM 元素没有 value 属性。您需要删除 html 中重复的 id。如果您从 p 标记中删除 id="country"，则带有 id="country" 的 input 将是由 document.getElementById 和 processPhase2 找到的将起作用。
关于javascript - 我不明白为什么我在这里收到 "Cannot read property ' length' of undefined"错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30034434/