显示表单的用户输入
Posted
技术标签:
【中文标题】显示表单的用户输入【英文标题】：Display user input for form 【发布时间】：2015-02-07 16:52:13 【问题描述】：所以我制作了一个包含多个输入的表单。我想在用户单击提交后在同一页面上显示用户的输入。但是，我的代码只显示第一个输入。由于某种原因，它没有抓住其他人。此外，所需的字段正在被我编码的 java 覆盖。这是我的html：
<body>
<div class = "content">
<h2>Provide Your Contact Information</h2>
<form id="theForm" method="get" action="submitData">
<table>
<tr>
<td>First name:</td>
<td><input type="text" size = "25" id="user_input" name="name" placeholder="Type your first name" /></td>
<tr>
<td>Middle name:</td>
<td><input type="text" size = "25" id="user_input" name="mname" placeholder="Type your middle name" /></td>
<tr>
<td>Last name:</td>
<td><input type="text" size = "25" id="user_input" name="lname" placeholder="Type your last name" required/></td>
</table>
<table>
<h3>Provide your login access information</h3>
<tr>
<td>Login ID:</td>
<td><input type="text" id="user_input" name="login" placeholder="Type a login id" required/></td>
</table>
</form>
</div>
<div class = "contentright">
<tr>
<td><input type="submit" onclick="showInput();" ></td>
<td><label>Your input: </label><br /></td>
<td><p><span id='display'></span> </p></td>
</div>
我的java代码：
function showInput()
var message_entered = document.getElementById("user_input").value;
document.getElementById('display').innerHTML = message_entered;
谢谢
更新****
function validateForm()
return (isNotEmpty("name", "Please enter your name!")
&& isNotEmpty("lname", "Please enter your last name!")
&& isSelected("city", "Please make a selection!")
&& isSelected("state", "Please make a selection!")
&& isNumeric("zipcode", "Please enter a 5-digit zip code!")
&& isLengthMinMax("zipcode", "Please enter a 5-digit zip code!", 5, 5)
&& isNumeric("phone", "Please enter a valid phone number!")
&& isValidEmail("email", "Enter a valid email!")
&& isLengthMinMax("login", "Enter a valid login id!", 10, 25)
&& isLengthMinMax("password", "Enter a valid password!", 6, 8));
我想要完成的是例如邮政编码，我只希望用户能够输入 5 位数字。我还想验证电子邮件或密码等内容。
【问题讨论】：
你应该为不同的html控件使用不同的id属性。 【参考方案1】：你只是捕捉到 1 个输入。正确的做法是捕获所有输入并循环遍历它们。
function showInput()
var form = document.forms[0].elements;
var message_entered = "";
for(var i = 0, j = form.length;i < j;i++)
if(form[i].type == "text") message_entered += (form[i].value + " - ");
document.getElementById('display').innerHTML = message_entered;
您可能还想为您的输入提供不同的 ID。
在这里查看示例工作：http://jsfiddle.net/vjk3zngh/
【讨论】：
谢谢！现在我的问题是所需的输入。当用户未回答必填字段时，应显示弹出窗口。 我放的代码是我尝试过的一个例子，我对不同的想法持开放态度。【参考方案2】：我认为问题在于您为所有输入提供了相同的 ID。它们会重叠，你最终只会得到最后一个结果。尝试切换到不同的 ID 或改用一个类。
【讨论】：
以上是关于显示表单的用户输入的主要内容，如果未能解决你的问题，请参考以下文章