CODEWITHSUNDEEP
javascripthtmlforms
user16324595
user16324595

Reputation:

How do I extract form data in html with js

I'm trying to create a web app, and I need to know the user input from form.

<form action="" method="get" class="settings">
    <div class="settings">
      <label for="length">length of character(s): </label>
      <input type="number" name="length" id="length" placeholder="5" required>
      <input type="submit" value="Change">
    </div>
  </form>

I need the form to run a js func foo() so I assume that I need to put it

<form action="" method="get" class="settings">
              ↑

how do I get the value of id="length" and use it in form action"foo()"?

Upvotes: 0

Views: 2125

Answers (1)

Zaydon Lim
Zaydon Lim

Reputation: 123

You can get the value of length with document.getElementById("id").value;

In order to run a js from form, you need to use onsubmit="" instead of action=""

onsubmit="" allows you to execute a js function upon submission of the form, while action="" allows you to be redirected to another page/site upon submission.

Read more about action="" in this site

onsubmit="" is here

Here is a workable code based on your example

function foo(){
  var lgt = document.getElementById("length").value;
  alert(lgt);
}
<form class="settings" onsubmit="foo()">
    <div class="settings">
      <label for="length">length of character(s): </label>
      <input type="number" name="length" id="length" placeholder="5" required>
      <input type="submit" value="Change">
    </div>
  </form>

Upvotes: 3

Related Questions