在javascript中使用来自html框的输入

Question

Currently, I am trying to learn js. At this moment, I can make some simple functional scripts. But whenever I want user input, I still have to us a prompt, which can become quite annoying. Therefore, I want to use HTML boxes for user input.

I put the box in HTML like this:

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

But how do I call the input in javascript then?

Thanks in advance.

Answer 1

There are various methods to get input textbox value:

Method 1:

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

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

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

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

Method 3:

Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live nodelist

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

Method 4:

document.getElementsByName('name')[whole_number].value

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

Method 5:

Use powerful document.querySelector('selector').value which uses CSS selector to select element

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

Method 6:

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

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

Answer 2

You can do as follow :

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

Javascript :

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

or :

you can create custom dialog and show it using javascript or jquery(best option)

For more about dialog refer This link

Answer 3

You can use window.openDialog to open a window as a dialog:

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

Then your dialog:

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