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.
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
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
document.getElementById() as the post above suggests. It's propably your best bet for now. Once you get the input element, you can read as well as write the contents with the .value attribute.
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>
eventthe clientclicks onthebox1element?