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

Question

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    lt input name  searchTxt  type  text  maxlength  512  id  searchTxt  class  searchField   gt    And this is my JavaScript code    lt script type  text javascript  gt    function searchURL        window location    http   www myurl com search      input text value        lt  script gt    How do I get the value from the text field into JavaScript

User · Answer

If you are using jQuery then by using plugin formInteract, you just need to do this:

// Just keep the HTML as it is.

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

At bottom of the page just include this plugin file and write this code:

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

Or if using a parameterized URL then use this:

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

Here is the link to project https://bitbucket.org/ranjeet1985/forminteract

You can use this plugin for many purposes like getting the value of a form, putting values into a form, validation of forms and many more. You can see some example of code in the index.html file of the project.

Of course I am the author of this project and all are welcome to make it better.

User · Answer

One can use the form elements to get all elements in a form  If an element has id it can be found with  namedItem  id    Example   var myForm   document getElementById  form1    var text   myForm elements namedItem  searchTxt   value  var url    http   www myurl com search     text    Source  w3schools

User · Answer

creates a listener for when you press a key window onkeyup   keyup     creates a global Javascript variable var inputTextValue   function keyup e        setting your input text to the global Javascript Variable for every key press   inputTextValue   e target value       listens for you to press the ENTER key  at which point your web address will change to the one you have input in the search box   if  e keyCode    13        window location    http   www myurl com search     inputTextValue          See this functioning in codepen

User · Answer

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  document getElementById  searchTxt   value     nbsp      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   Support  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   To see the support of these methods with all the bugs including more details click here Difference Between Static collections and Live collections click Here Difference Between NodeList and HTMLCollection click Here

User · Answer

Just try this     x000D   x000D  function handleValueChange         var y   document getElementById  textbox id   value      var x   document getElementById  result        x innerHTML   y     function changeTextarea       var a   document getElementById  text-area   value    var b   document getElementById  text-area-result      b innerHTML   a    x000D  input     padding  5px     p     white-space  pre    x000D   lt input type  text  id  textbox id  placeholder  Enter string here     oninput  handleValueChange    gt   lt p id  result  gt  lt  p gt    lt textarea name    id  text-area  cols  20  rows  5  oninput  changeTextarea    gt  lt  textarea gt   lt p id  text-area-result  gt  lt  p gt  x000D   x000D   x000D

User · Answer

I would create a variable to store the input like this   var input   document getElementById  input id   value    And then I would just use the variable to add the input value to the string      Your string    input

User · Answer

simple js  function copytext text        var textField   document createElement  textarea        textField innerText   text      document body appendChild textField       textField select        document execCommand  copy        textField remove

User · Answer

If your input is in a form and you want to get value after submit you can do like    lt form onsubmit  submitLoginForm event   gt       lt input type  text  name  name  gt       lt input type  password  name  password  gt       lt input type  submit  value  Login  gt   lt  form gt    lt script type  text javascript  gt       function submitLoginForm event           event preventDefault             console log event target  name   value           console log event target  password   value          lt  script gt    Benefit of this way  Example your page have 2 form for input sender and receiver information     If you don t use form for get value then  - You can set 2 different id or tag or name      for each field like sender-name and receiver-name  sender-address and receiver-address       - If you set same value for 2 input  then after getElementsByName  or getElementsByTagName      you need to remember 0 or 1 is sender or receiver  Later if you change the order of 2 form in html  you need to check this code again  If you use form  then you can use name  address

User · Answer

You should be able to type    x000D   x000D  var input   document getElementById  searchTxt    x000D   x000D  function searchURL     x000D       window location    http   www myurl com search     input value  x000D    x000D   lt input name  searchTxt  type  text  maxlength  512  id  searchTxt  class  searchField   gt  x000D   x000D   x000D    I m sure there are better ways to do this  but this one seems to work across all browsers  and it requires minimal understanding of JavaScript to make  improve  and edit

User · Answer

Try this one   lt input type  text  onkeyup  trackChange this value   id  myInput  gt   lt script gt  function trackChange value        window open  http   www google com search output search amp q     value     lt  script gt

User · Answer

Tested in Chrome and Firefox   Get value by element id    lt input type  text  maxlength  512  id  searchTxt  class  searchField   gt   lt input type  button  value  Get Value  onclick  alert searchTxt value   gt    Set value in form element    lt form name  calc  id  calculator  gt     lt input type  text  name  input  gt     lt input type  button  value  Set Value  onclick  calc input value  Set Value   gt   lt  form gt    https   jsfiddle net tuq79821   Also have a look at a JavaScript calculator implementation  http   www 4stud info web-programming samples dhtml-calculator html  UPDATE from  bugwheels94  when using this method be aware of this issue

User · Answer

lt input id  new   gt       lt button  onselect  myFunction    gt it lt  button gt           lt script gt          function myFunction                 document getElementById  new   value    a                      lt  script gt

User · Answer

Also you can  call by tags names  like this  form name input name value  So you will have the specific value of determined input in a specific form

User · Answer

You can use onkeyup when you have more input field  Suppose you have four or input then  document getElementById  something   value is annoying  we need to write 4 lines to fetch value of input field   So  you can create a function that store value in object on keyup or keydown event   Example     lt div class  container  gt       lt div gt           lt label for    gt Name lt  label gt           lt input type  text  name  fname  id  fname  onkeyup handleInput this  gt       lt  div gt       lt div gt           lt label for    gt Age lt  label gt           lt input type  number  name  age  id  age  onkeyup handleInput this  gt       lt  div gt       lt div gt           lt label for    gt Email lt  label gt           lt input type  text  name  email  id  email  onkeyup handleInput this  gt       lt  div gt       lt div gt           lt label for    gt Mobile lt  label gt           lt input type  number  name  mobile  id  number  onkeyup handleInput this  gt       lt  div gt       lt div gt           lt button onclick submitData   gt Submit lt  button gt       lt  div gt   lt  div gt    javascript     lt script gt      const data          function handleInput e           data e name    e value            function submitData            console log data fname     get first name from object         console log data     return object        lt  script gt

User · Answer

You can read value by searchTxt value   x000D   x000D  function searchURL        let txt   searchTxt value     console log txt         window location    http   www myurl com search     txt         document querySelector   search   addEventListener  click       gt searchURL     x000D   lt input name  searchTxt  type  text  maxlength  512  id  searchTxt  class  searchField   gt    lt button class  search  gt Search lt  button gt  x000D   x000D   x000D   UPDATE I see many downvotes but any comments - however  for future readers  actually this solution works

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

Examples related to javascript

Examples related to dom

Examples related to html-input