Html input text javascript value

How to get text box value in JavaScript

I am trying to use JavaScript to get the value from an HTML text box but value is not coming after white space For example:

var jobValue = document.getElementById('txtJob').value 

16 Answers 16

Your element does not have an ID but just a name. So you could either use getElementsByName() method to get a list of all elements with this name:

var jobValue = document.getElementsByName('txtJob')[0].value // first element in DOM (index 0) with name="txtJob" 

Or you assign an ID to the element:

+1 Gumbo: ‘id’ is the easiest way to access page elements. IE (pre version 8) will return things with a matching ‘name’ if it can’t find anything with the given ID, but this is a bug.

id-vs-name won’t affect this; I suspect what’s happened is that (contrary to the example code) you’ve forgotten to quote your ‘value’ attribute:

var word = document.getElementById("word").value;//by id or var word = document.forms[0].elements[0].value;//by index //word = a word from form input var kodlandi = escape(word);//apply url encoding alert(escape(word)); or alert(kodlandi); 

the problem you are not using encoding for input values from form so not browser adds ones to .

ontop has some problems as unicode encoding/decoding operations so use this function encoding strings/arrays

function urlencode( str ) < // http://kevin.vanzonneveld.net3. // + original by: Philip Peterson4. // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)5. // * example 1: urlencode('Kevin van Zonneveld!'); // * returns 1: 'Kevin+van+Zonneveld%21'7. var ret = str; ret = ret.toString(); ret = encodeURIComponent(ret); ret = ret.replace(/%20/g, '+'); return ret; >ex. var word = "some word"; word = urlencode(word); 

Источник

Свойства и методы формы

Формы и элементы управления, такие как , имеют множество специальных свойств и событий.

Работать с формами станет намного удобнее, когда мы их изучим.

Навигация: формы и элементы

Формы в документе входят в специальную коллекцию document.forms .

Это так называемая «именованная» коллекция: мы можем использовать для получения формы как её имя, так и порядковый номер в документе.

document.forms.my - форма с именем "my" (name="my") document.forms[0] - первая форма в документе

Когда мы уже получили форму, любой элемент доступен в именованной коллекции form.elements .

Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio .

В этом случае form.elements[name] является коллекцией, например:

Эти навигационные свойства не зависят от структуры тегов внутри формы. Все элементы управления формы, как бы глубоко они не находились в форме, доступны в коллекции form.elements .

Форма может содержать один или несколько элементов внутри себя. Они также поддерживают свойство elements , в котором находятся элементы управления внутри них.

  
info
 
  

Есть более короткая запись: мы можем получить доступ к элементу через form[index/name] .

Другими словами, вместо form.elements.login мы можем написать form.login .

Это также работает, но есть небольшая проблема: если мы получаем элемент, а затем меняем его свойство name , то он всё ещё будет доступен под старым именем (также, как и под новым).

В этом легче разобраться на примере:

Обычно это не вызывает проблем, так как мы редко меняем имена у элементов формы.

Обратная ссылка: element.form

Для любого элемента форма доступна через element.form . Так что форма ссылается на все элементы, а эти элементы ссылаются на форму.

Элементы формы

Рассмотрим элементы управления, используемые в формах.

input и textarea

К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.

input.value = "Новое значение"; textarea.value = "Новый текст"; input.checked = true; // для чекбоксов и переключателей

Обратим внимание: хоть элемент . и хранит своё значение как вложенный HTML, нам не следует использовать textarea.innerHTML для доступа к нему.

Там хранится только тот HTML, который был изначально на странице, а не текущее значение.

select и option

Элемент имеет 3 важных свойства:

1. select.options – коллекция из подэлементов ,
2. select.value – значение выбранного в данный момент ,
3. select.selectedIndex – номер выбранного .

Они дают три разных способа установить значение в :

1. Найти соответствующий элемент и установить в option.selected значение true .
2. Установить в select.value значение нужного .
3. Установить в select.selectedIndex номер нужного .

Первый способ наиболее понятный, но (2) и (3) являются более удобными при работе.

Вот эти способы на примере:

Яблоко Груша Банан   

В отличие от большинства других элементов управления, позволяет нам выбрать несколько вариантов одновременно, если у него стоит атрибут multiple . Эту возможность используют редко, но в этом случае для работы со значениями необходимо использовать первый способ, то есть ставить или удалять свойство selected у подэлементов .

Их коллекцию можно получить как select.options , например:

 Блюз Рок Классика   

new Option

Элемент редко используется сам по себе, но и здесь есть кое-что интересное.

В спецификации есть красивый короткий синтаксис для создания элемента :

option = new Option(text, value, defaultSelected, selected);

• text – текст внутри ,
• value – значение,
• defaultSelected – если true , то ставится HTML-атрибут selected ,
• selected – если true , то элемент будет выбранным.

Тут может быть небольшая путаница с defaultSelected и selected . Всё просто: defaultSelected задаёт HTML-атрибут, его можно получить как option.getAttribute(‘selected’) , а selected – выбрано значение или нет, именно его важно поставить правильно. Впрочем, обычно ставят оба этих значения в true или не ставят вовсе (т.е. false ).

let option = new Option("Текст", "value"); // создаст Текст

Тот же элемент, но выбранный:

let option = new Option("Текст", "value", true, true);

option.selected Выбрана ли опция. option.index Номер опции среди других в списке . option.value Значение опции. option.text Содержимое опции (то, что видит посетитель).

Ссылки

Итого

Свойства для навигации по формам:

document.forms Форма доступна через document.forms[name/index] . form.elements Элементы формы доступны через form.elements[name/index] , или можно просто использовать form[name/index] . Свойство elements также работает для . element.form Элементы хранят ссылку на свою форму в свойстве form .

Значения элементов формы доступны через input.value , textarea.value , select.value и т.д. либо input.checked для чекбоксов и переключателей.

Для элемента мы также можем получить индекс выбранного пункта через select.selectedIndex , либо используя коллекцию пунктов select.options .

Это были основы для начала работы с формами. Далее в учебнике мы встретим ещё много примеров.

В следующей главе мы рассмотрим такие события, как focus и blur , которые могут происходить на любом элементе, но чаще всего обрабатываются в формах.

Источник

Input Text value Property

The value property sets or returns the value of the value attribute of a text field.

The value property contains the default value OR the value a user types in (or a value set by a script).

Browser Support

Syntax

Return the value property:

Property Values

Technical Details

More Examples

Example

Get the value of a text field:

Example

var at = document.getElementById(«email»).value.indexOf(«@»);
var age = document.getElementById(«age»).value;
var fname = document.getElementById(«fname»).value;
submitOK = «true»;

if (fname.length > 10) alert(«The name may have no more than 10 characters»);
submitOK = «false»;
>

if (isNaN(age) || age < 1 || age >100) alert(«The age must be a number between 1 and 100»);
submitOK = «false»;
>

if (at == -1) alert(«Not a valid e-mail!»);
submitOK = «false»;
>

if (submitOK == «false») return false;
>

Example

var mylist = document.getElementById(«myList»);
document.getElementById(«favorite»).value = mylist.options[mylist.selectedIndex].text;

Example

var no = document.getElementById(«no»);
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById(«result»).value;
txt = txt + option;
document.getElementById(«result»).value = txt;

Example

An example that shows the difference between the defaultValue and value property:

Источник

How do I get the value of text input field using JavaScript?

I am working on a search with JavaScript. I would use a form, but it messes up something else on my page. I have this input text field:

16 Answers 16

There are various methods to get an input textbox value directly (without wrapping the input element inside a form element):

Method 1

document.getElementById(‘textbox_id’).value to get the value of desired box

For example

Note: Method 2,3,4 and 6 returns a collection of elements, so use [whole_number] to get the desired occurrence. For the first element, use [0] , for the second one use [1] , and so on.

Method 2

Use document.getElementsByClassName(‘class_name’)[whole_number].value which returns a Live HTMLCollection

For example

document.getElementsByClassName(«searchField»)[0].value; if this is the first textbox in your page.

Method 3

Use document.getElementsByTagName(‘tag_name’)[whole_number].value which also returns a live HTMLCollection

For example

document.getElementsByTagName(«input»)[0].value; , if this is the first textbox in your page.

Method 4

document.getElementsByName(‘name’)[whole_number].value which also >returns a live NodeList

For example

document.getElementsByName(«searchTxt»)[0].value; if this is the first textbox with name ‘searchtext’ in your page.

Method 5

Use the powerful document.querySelector(‘selector’).value which uses a CSS selector to select the element

For example

• document.querySelector(‘#searchTxt’).value; selected by id
• document.querySelector(‘.searchField’).value; selected by class
• document.querySelector(‘input’).value; selected by tagname
• document.querySelector(‘[name=»searchTxt»]’).value; selected by name

Method 6

document.querySelectorAll(‘selector’)[whole_number].value which also uses a CSS selector to select elements, but it returns all elements with that selector as a static Nodelist.

For example

• document.querySelectorAll(‘#searchTxt’)[0].value; selected by id
• document.querySelectorAll(‘.searchField’)[0].value; selected by class
• document.querySelectorAll(‘input’)[0].value; selected by tagname
• document.querySelectorAll(‘[name=»searchTxt»]’)[0].value; selected by name

Browser	Method1	Method2	Method3	Method4	Method5/6
IE6	Y(Buggy)	N	Y	Y(Buggy)	N
IE7	Y(Buggy)	N	Y	Y(Buggy)	N
IE8	Y	N	Y	Y(Buggy)	Y
IE9	Y	Y	Y	Y(Buggy)	Y
IE10	Y	Y	Y	Y	Y
FF3.0	Y	Y	Y	Y	N IE=Internet Explorer
FF3.5/FF3.6	Y	Y	Y	Y	Y FF=Mozilla Firefox
FF4b1	Y	Y	Y	Y	Y GC=Google Chrome
GC4/GC5	Y	Y	Y	Y	Y Y=YES,N=NO
Safari4/Safari5	Y	Y	Y	Y	Y
Opera10.10/
Opera10.53/	Y	Y	Y	Y(Buggy)	Y
Opera10.60
Opera 12	Y	Y	Y	Y	Y

Useful links

Источник