显示表单的用户输入答案

【问题标题】：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属性。

标签： javascript forms form-submit innerhtml getelementbyid

【解决方案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 或改用一个类。

【讨论】：