Использование ввода из ящиков html в javascript

Question

В настоящее время я пытаюсь изучить js. В этот момент я могу сделать несколько простых функциональных скриптов. Но всякий раз, когда мне нужен пользовательский ввод, у меня все еще есть подсказка, которая может стать довольно раздражающей. Поэтому я хочу использовать HTML-поля для ввода пользователем.

Я положил коробку в HTML так:

<FORM> 
    <INPUT type="button" value="Fill Me In" name="box1"> 
</FORM> 

Но как я называю вход в JavaScript тогда?

Заранее спасибо.

Answer 1

можно сделать следующим образом:

<FORM> 
    <INPUT type="button" value="Fill Me In" name="box1" id="txt"> 
</FORM> 

Javascript:

var txtval=document.getElementById("txt").value; 

или:

вы можете создать диалоговое окно пользовательского и показать его с помощью JavaScript или JQuery (лучший вариант)

Для получения дополнительной информации о диалоговом окне см. This link

Answer 2

Вы можете использовать window.openDialog, чтобы открыть окно в диалоге:

var retValues = { box1: null }; 
var win = openDialog("your_form.html", "dlg", "modal", retVals); 
alert(retValues.box1); 

Тогда ваш диалог:

<FORM onsubmit="window.arguments[1].box1 = document.getElementById('txt').value; close();"> 
    <INPUT type="button" value="Fill Me In" name="box1" id="txt"> 
</FORM> 

Answer 3

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

метод 1:

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

Eg. document.getElementById("searchTxt").value; 

* Примечание: метод 2,3,4 и 6 возвращает коллекцию элементов, называемых NodeList, поэтому используйте [whole_number], чтобы получить желаемое значение, для использования первого элемента [0], а для второго - 1 и т. Д. ... *

Метод 2:

Use document.getElementsByClassName('class_name')[whole_number].value which returns a Live Nodelist 

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

Метод 3:

Использование document.getElementsByTagName ('tag_name') [whole_number] .value который также возвращает живой нодлист

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

Метод 4:

document.getElementsByName ('имя') [whole_number] .value

Eg. document.getElementsByName("searchTxt")[0].value; 
if this is the first textbox with name 'searchtext' in your page. 

Метод 5:

используют мощные document.querySelector («селектор»). значение, которое использует селектор CSS для выбора элемента

Eg. 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 

Метод 6:

document.querySelectorAll ('селектор') [whole_number] .value, который также использует селектор CSS для выбора элементов, но он возвращает все элементы с селектором как статический нодлисте.

Eg. 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