在此HTML中，要求用户输入个人数据。为了收集它们，我知道我应该使用一个阵列并将它们全部收集起来。在div inline中，我计划在表格中显示用户的输入。但你怎么做呢？
tab=[];
function submitdata(){
}<!DOCTYPE html>
<meta charset=utf-8" />
<title>Form</title>
<link rel="stylesheet" href="http://birdis.notacat.com/css/layout.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://birdis.notacat.com/css/awwwards.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://birdis.notacat.com/fancybox/source/jquery.fancybox.css?v=2.0.5" type="text/css" media="screen" />
<script src="http://birdis.notacat.com/js/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://birdis.notacat.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 392,
maxHeight : 580,
fitToView : true,
padding : 0,
margin : 0,
width : '70%',
height : '70%',
autoSize : true,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'elastic'
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1><img src="Fourth Quarter Project/images/welcome.png" alt="welcome" /></h1>
<form name="PersonalInfo">
<p>
<br><br>
First Name: <input type="text" name="firstNameTextField" placeholder="Your First Name">
<br><br>
Last Name: <input type="text" name="lastNameTextField" placeholder="Your Last Name">
<br>
<br>
Grade Level:
<br><br>
<input type="radio" value="A" name="gradeLevel"> Grade 7 <br>
<input type="radio" value="B" name="gradeLevel"> Grade 8 <br>
<input type="radio" value="C" name="gradeLevel"> Grade 9 <br>
<input type="radio" value="D" name="gradeLevel"> 4th Year <br>
<br>
<br>
Section: <select name="section">
<option> Emerald </option>
<option> Diamond </option>
<option> Ruby </option>
<option> Camia </option>
<option> Jasmin </option>
<option> Sampaguita </option>
<option> Potassium </option>
<option> Rubidium </option>
<option> Sodium </option>
<option> Electron </option>
<option> Neutron </option>
<option> Proton </option>
</select>
<br><br>
Date of Birth: <input type="text" name="month" placeholder="mm" size=1 maxlength="2"> /
<input type="text" name="day" placeholder="dd" size=1 maxlength="2"> /
<input type="text" name="year" placeholder="yyyy" size=1 maxlength="4">
<br><br>
Contact Number: <input type="text" name="contactNumberTextField" placeholder="Your Contact Number">
<br><br>
Address:
<br><textarea name="address" rows=3 cols=30> </textarea>
</p>
<br>
</form>
<div id="blackbox">
<input type="submit"> Submit </input>
</div>
<div id="blackbox">
<a class="various" href="#inline">Display</a>
</div>
<button onClick=submitData()> Submit </button>
<button onClick=displayData(submitData())> Display </button>
</div>
</div>
<div id="inline" style="width: 386px; display: none;">
<span class="inspiration">Your Personal Information</span>
<p>Angela Mae</p>
<div class="right">- <span class="red"></span></div>
<div class="visitbox">
<h2><a href="" ></a></h2>
<span class="count"><span class="tenpix"></span></span>
</div>
<p><br/>
<span class="cursive"><a href="">#kakuri</a>, <a href="">#wat<a>,</p>
<p><span class="tenpix"></span></p>
<p><a href="" ></a> <span class="orjust"></span> <span class="send"><a href="" ></a></span></p>
</div>
<script>
var tab=[];
function submitData(){
tab.push(document.forms["PersonalInfo"][firstNameTextField]);
return tab[];
}
function displayData(t){
alert t;
}
</script>
</body>
</html>
答案 0 :(得分：0)
var tab=[];
function submitData(){
document.forms["PersonalInfo"].firstNameTextField.value;
return tab;
}
function displayData(t){
console.log(t);
}
试试这个。
答案 1 :(得分：0)
function displayData(){
var data = $('form#PersonalInfo').serializeArray();
$.each(data, function(i,obj){
console.log(obj.name +" : '" + obj.value + "'");
});
}