Отобразить пользовательский ввод для формы

Итак, я сделал форму с несколькими входами. Я хочу отображать входные данные пользователя на одной странице после нажатия кнопки «Отправить». Однако в моем коде отображается только первый вход. По какой-то причине он не поймает других. Кроме того, обязательные поля переопределяются кодировкой 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)); 
}

То, что я пытаюсь сделать это, например, для zip-код Я хочу, чтобы пользователь мог ввести 5 цифр. Я также хочу проверить такие вещи, как электронная почта или пароль.

источник

2014-12-09 lalalala

Вы должны использовать другой идентификатор атрибутов для различных элементов управления HTML. – Dharmang

Вы просто ловите 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; 

}

Вы также можете указать разные идентификаторы ваших входов.

Проверьте здесь пример работает: http://jsfiddle.net/vjk3zngh/

источник

2014-12-09 17:35:49 Verhaeren

спасибо! Теперь моя проблема связана с необходимыми входами. Всплывающие окна должны отображаться, когда пользователь не отвечает на требуемые поля. – lalalala

Проверьте эту скрипку с новой функцией: http://jsfiddle.net/vjk3zngh/1/ – Verhaeren

спасибо! Обновленный вопрос – lalalala

Я думаю, проблема в том, что вы указываете одинаковые идентификаторы ко всем входам. Они будут перекрываться, и в итоге вы получите только последний результат. Попробуйте переключиться на разные идентификаторы или вместо этого используйте класс.

источник

2014-12-09 17:31:01

Отобразить пользовательский ввод для формы

ответ

Смежные вопросы