如何在同一页面上显示用户提交的数据

How to display user-submitted data on same page

本文关键字：用户显示提交数据一页更新时间：2023-09-26

在这个HTML中，用户被要求输入个人数据。为了收集它们，我知道我应该使用一个数组并在那里收集它们。在div内联中，我计划在一个表中显示用户的输入。但你实际上是怎么做到的？

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>

var tab=[];
function submitData(){
    document.forms["PersonalInfo"].firstNameTextField.value;
    return tab;
}
function displayData(t){
    console.log(t);
}

试试这个。

function displayData(){
    var data = $('form#PersonalInfo').serializeArray();
    $.each(data, function(i,obj){
       console.log(obj.name +" : '" + obj.value + "'");
    });
}