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

标签 javascript html css tabular

在此 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);
}

试试这个。

关于javascript - 如何在同一页面上显示用户提交的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29136486/

相关文章:

javascript - 选项卡时如何将焦点设置到子窗口和开启器窗口

html - 在 GitHub Markdown 中显示 PDF

css - 在 div 旁边 float div

javascript - jQuery.validate 和隐藏输入

javascript - 只允许显示文本字段中的字母

html - 当一个尺寸发生变化时,将相对定位的图像保持在底部

html - 如何在 HTML/CSS 中设计双引号?

html - 菜单在 chrome 上消失,直到你在开发者工具中弄乱它

css - 轻松制作全彩动画和缩放图像

javascript - 在 script.aculo.us 中降低元素对拖动的敏感度