Grabbing User Input

Question

First name: <input type="text" name="firstname"></input> 
<input type="submit" value="Submit" /> 

Предположим, у меня есть простая форма выше. Как бы я захватил то, что пользователь вводил в поле «Имя» в JS. Я пробовал:

document.getElementsByTagName("input")[1].onclick = function() { 
    inputted = document.getElementsByTagName("input")[0].innerHTML; 
} 

Но это не работает. Как мне это сделать?

Answer 1

Использование value для текстовых входов:

inputted = document.getElementsByTagName("input")[0].value; 

Кроме того, убедитесь, чтобы добавить var ключевое слово в переменных так, чтобы не создавать глобальную переменную:

var inputted = document.getElementsByTagName("input")[0].value; 

Вы также не должны ставить закрытие </input> бирка т.к. есть самозакрывающийся бирка:

<input type="text" name="firstname" /> 

---

Кстати, вы также можете получить значение элементов, используя ниже синтаксисом:

formName.elementName.value; 

Или

document.forms['formName'].elementName.value; 

В вашем случае это будет:

var inputted = formName.firstname.value; 

Или

var inputted = document.forms['formName'].firstname.value; 

Замените formName на любое имя вашего <form>.

---

Наконец вы можете также получить элемента value если применить id к нему:

<input type="text" name="firstname" id="firstname" /> 

, а затем использовать getElementById:

var inputted = document.getElementById('firstname'); 

Answer 2

Если вы используете форму, вы можете попробовать что-то вроде этого:

var input = document.forms["formName"]["fieldName"].value; 

Else, делают использование .value атрибута:

var input = document.getElementsByTagName("input")[0].value; 

Answer 3

var inputs=document.getElementsByTagName("input"), 
     i=inputs.length; 
// 
    while(i--){ 
       inputs[i].onclick=myClickEventHandler; 
    }; 
// 
function myClickEventHandler(evt){ 
    var myVal; 
    switch (this.name) { 

     case 'firstname': 

      myVal = this.value; 
      break; 
    }; 
};