How to Get the Value of Text Input Field Using JavaScript

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

get written text in HTML input field in JS

You should use .value instead of .innerText.

function signIn(userName, password) {
  console.log(userName,password)
}

const currentUsername = document.getElementById("username");
const currentPassword = document.getElementById("password");
const submitButton = document.getElementById("submitButton");

submitButton.addEventListener("click", () => {
  signIn(currentUsername.value, currentPassword.value);
});

<main>
  <form role="form">
    <fieldset id="personal-information" name="personal-information">
      <legend>Personal Information</legend>

      <section class="usernameSection" name="first-name">
        <label for="username">username:*</label>
        <input
          id="username"
          type="text"
          name="textfield"
          placeholder="username"
        />
      </section>
      <br />
      <section class="passwordSection" name="passwordSection">
        <label for="password">password:*</label>
        <input
          id="password"
          type="password"
          name="password"
          placeholder="password"
        />
      </section>
      <section class="submit" name="sumbit">
        <button id="submitButton" type='button' name="submit button"/>Sign in</button>
      </section>
    </fieldset>
  </form>
</main>

How to get the input 's value?

The best way to get the value of an input is by making a form:

    <form class="my-form">
        <input type="text" placeholder="Type " name="my-input">
        <button>Get Value</button>
    </form>

    <script>
        let form = document.querySelector(".my-form");

        form.addEventListener("submit", function (e) {
        e.preventDefault() // This prevents the window from reloading
        
        let formdata = new FormData(this);
        let input = formdata.get("my-input");

        alert(input);
        });
    </script>

That's the best way of geting data from inputs. You simply put the values of the form with new FormData(), and then you get the input values with formdata.get("input_name")

How to get value from input field with Javascript?

The other answers are also correct (using jQuery .keyup), but you can also use this solution below (which is better). This solution uses pure javascript.

The code selects the element by using .getElementById() and uses .addEventListener() to do something when input changes.

var text = document.getElementById("text");

window.onload = function() {

  text.addEventListener("input", function() {

    console.log(text.value);

  });

}

<input id="text" />

Set the value of an input field

This is one way of doing it:

document.getElementById("nameofid").value = "My value";

How do i get the value of text input field using react

By using the value prop of the input, you turn it into a controled input element and thus need to update its value via a state variable. So this:

              <input
                className='form-input'
                type='text'
                name='username'
                placeholder='Enter your username'
                value={values.username}
                onChange={handleChange}
                /*
                //onChange={(e) => {
                //  setUsernameReg(e.target.value);
                //}}
                */
              />

Should just be this:

              <input
                className='form-input'
                type='text'
                name='username'
                placeholder='Enter your username'
                value={usernameReg}
                onChange={e => setUsernameReg(e.target.value)}             
              />

Note that this only answers this part:

I succeed in putting stuff in my database so the link works but i can't get the values of what i typed in the form

So this is how you can access those values. I can't guide you on how to get those values all the way to your DB as there is a longer distance they have to travel and I don't know what else could be in the way.

---

You should also look into useRef(), which will give you access to those input fields without updating your state on every change of the input and thus re-rendering your form over and over.

You can do something like this:

...
const regInput = React.useRef();
...

...

              <input
                ref={regInput}
                className='form-input'
                type='text'
                name='username'
                placeholder='Enter your username'

Then when you're ready to submit, just access the value of the username input like so:

...
const v = regInput.current.value;
...

Can't get the value of input element

This is normal you set you variable searchValue outside of your function search() called on click.

Set your variable inside your function called on click.

If you get the value at a moment it has no value it is normal you get no value.

So if you get the value outside of your click function you won't have it. You must use .value at the moment you have a value.

function search() {
    var searchValue = document.getElementById('search').value;
    console.log(searchValue);
}

<div class="container">
    <input type="text" id="search" />
    <button id="btn" onclick="search()">Search</button>
</div>

---

Related Topics