How to get user input from javascript form?

Question

so my question is pretty simple.

How to I get user input from a form and put it into a variable ?

Im struggling to do this simple task and would appreciate some help.

Here is my code :

html:

<body>
        <form>
            <input type="text" id="input_id" value="">
            <input type="submit" value="Submit">
            <div id="alert" style="color: red"></div>
        </form>
    </body>

Javascript

    var a = document.getElementById('input_id').value;

function wawa() {
    return a;
}
document.getElementById('alert').innerHTML = "user entered this value: " + " " + a;

I would like to do this with vanilla JS and no library.

Thanks.

Might suggest looking at a basic JS tutorial like this one: https://www.youtube.com/watch?v=IzkAi2QMp7Y — Greg Rozmarynowycz, Jan 03 '18 at 04:11

score 4 · Accepted Answer · edited Jan 09 '18 at 18:15

You don't need a variable outside your function. All you need is a button and an onclick event. The onclick event calls a function that checks input and writes to the <div>.

function wawa() {
  var variable = document.getElementById('input_id').value;
  document.getElementById('alert').innerHTML = 'The user input is: ' + variable;
}

<body>
  <form>
    <input type="text" id="input_id" value="">
    <input type="button" value="Submit" onclick="wawa()" />
    <div id="alert" style="color: red"></div>
  </form>
</body>

score 1 · Answer 2 · answered Jan 03 '18 at 04:50

Just like this :

var a = document.getElementById('input_id');
a.addEventListener('keyup',function() {
document.getElementById('alert').innerHTML = "user entered this value: " + " " 
   + this.value;
})

<form>
  <input type="text" id="input_id" value="">
  <input type="submit" value="Submit">
  <div id="alert" style="color: red"></div>
</form>

score 0 · Answer 3 · answered Jan 03 '18 at 04:10

0

Can you try this script if it is work for you:

var a = document.getElementById('input_id');
a.addEventListener('keyup', function(event) {
document.getElementById('alert').innerHTML = "user entered this value: " + " " 
   + this.value;
})

answered Jan 03 '18 at 04:10

Hanif

3,739
1
12
18

fjoe · Answer 4 · 2018-01-03T04:48:02.793

You can use a simple button with a call to a JavaScript function via onclick.

The main key your missing is a JavaScript event tied to your button.

Here is how:

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
  console.log(a);
}

<body>
  <form>
    <input type="text" id="input_id" value="">
    <div id="alert" style="color: red"></div>
    <button onclick="getData();">Get Data</button>
  </form>
</body>

If your form doesn't need to be submitted you do not need a from and could just use a oninput event to get a more responsive output:

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
}

<body>
  <input type="text" id="input_id" value="" oninput="getData();">
  <div id="alert" style="color: red"></div>
</body>

If you want a little tutorial on events this is a good place to start MDN Building Blocks Events.

Given you need to submit the data you could also try onsubmit:

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
}

function submittedData() {
  var a = document.getElementById("input_id").value;
  console.log(a);
}

<body>
  <form onsubmit="submittedData();">
    <input type="text" id="input_id" value="" oninput="getData();">
    <div id="alert" style="color: red"></div>
    <input type="submit" value="Submit" />
  </form>
</body>

very extensive answer fjoe. Thank you , but yes my form need to be submitted. datatype needs to be check by browser before being sent to server for processing. — , Jan 03 '18 at 04:28
@coco I have added some content links that should help improve the quality of the answer and give you more to think about and work on :) — fjoe, Jan 03 '18 at 04:30
@coco I have added an example for onsubmit that will work with your from to do what you need. — fjoe, Jan 03 '18 at 04:40

How to get user input from javascript form?

4 Answers4