Question

所以我制作了一个包含多个输入的表单。我想在用户点击提交后在同一页面上显示用户的输入。但是，我的代码只显示第一个输入。由于某种原因，它没有抓住其他人。此外，java i编码覆盖了必填字段。这是我的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;
}

由于

UPDATE ****

 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位数。我还想验证电子邮件或密码等内容。

Answer 1

我认为问题在于您为所有输入提供了相同的ID。它们会重叠，你最终只会得到最后的结果。尝试切换到不同的ID或使用类。

Answer 2

你只是抓住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 个答案: