connect my html form to my js

Question

I'm a beginner and I'm trying to have a form collect numbers that will be the number of columns and rows on my spreadsheet, I created a form to collect this info:

<form>
        number of rows? 
            <br>
            </br>
        <input type="number" id="rows" name="rows" value="" />
            <br>
            </br>       
        number of columns? 
            <br>
            </br>
        <input type="number" id="cols" name="cols" value="" />
            <br>
            </br>
        <input type="submit" value="submit" />
        </form>

and I tried using:

let row = document.getElementById("rows")

let col = document.getElementById("cols");

to get the values added on the browser as my column and rows number but it's not working, what am I missing?

"it's not working" doesn't tell us anything. *are you getting an error?* **Be specific** — , Apr 28 '17 at 19:32
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — , Apr 28 '17 at 19:33
You shouldn't be using IDs if there are going to be multiple elements with the same ID. IDs should be unique. — APAD1, Apr 28 '17 at 19:33
I have absolutely no idea how you are determining that "it's not working". What do you expect to happen? That JS is never going to have any visible effect. — Quentin, Apr 28 '17 at 19:34
Use a [validator](https://validator.w3.org/nu/). You have HTML errors. — Quentin, Apr 28 '17 at 19:35
FYI : you have invalid `HTML`. Also, where's your event handler? You aren't grabbing the value after some action... you're just grabbing the default value of the input. — devlin carnate, Apr 28 '17 at 19:40

score 0 · Answer 1 · answered Apr 28 '17 at 19:36

0

You get the value of an existing input field with:

var row = document.getElementById("rows");
var rowValue = row.value;

To test: alert(rowValue);

answered Apr 28 '17 at 19:36

J. Henkel

21
8

when i console.log(row.value) nothing shows, its empty – L.I. Apr 28 '17 at 19:39
That's probably because you initialize the input with `value=""`. If you want to get the value that a user inputs, you need an event handler that fires on some action. – devlin carnate Apr 28 '17 at 19:42

score -1 · Answer 2 · answered Apr 28 '17 at 19:37

-1

You are missing the .value attribute. It needs to look like this:

document.getElementById("rows").value;

Or - if you're using jQuery, simply val();

answered Apr 28 '17 at 19:37

kawnah

3,204
8
53
103

Badacadabra · Answer 3 · 2017-04-28T20:42:40.637

It is OK to be a beginner. Everyone started somewhere... ;)

Please consider these pieces of advice:

Do not use <br> for presentation. Use CSS instead.
Add labels linked to your form fields.
Wait for the DOM to be ready. Using an IIFE is a clever choice.
Declare event listeners to detect clicks and do some action in your handler.
Use preventDefault() to avoid browser redirection when you click a submit button.

Here is a working example:

(function () {
  var rows = document.getElementById('rows'),
      cols = document.getElementById('cols'),
      submit = document.querySelector('input[type="submit"]');
    
  submit.addEventListener('click', handler, false);
  
  function handler(e) {
    e.preventDefault();
    console.log("Rows: " + rows.value);
    console.log("Columns: " + cols.value);
  }
})();

form {
  display: flex;
  flex-direction: column;
  align-items: left;
}

<form>
  <label for="rows">Number of rows?</label>
  <input type="number" id="rows" name="rows" value=""> 
        
  <label for="cols">Number of columns?</label> 
  <input type="number" id="cols" name="cols" value="">

  <input type="submit" value="submit">
</form>

Your first two points are irrelevant to the question being asked. — , Apr 28 '17 at 20:59
I don't fully agree. I see Stack Overflow as a collaboration tool where we learn and share. I would have loved to benefit from these simple pieces of advice when I was a student, so I thought it was a nice thing to include this information here. Moreover, the OP's code is invalid HTML, so IMO my recommendations are part of the question. — Badacadabra, Apr 28 '17 at 21:53

connect my html form to my js

3 Answers3