Get values from HTML form

Question

I'm trying to get the values from a form I've created in HTML: I'm using Javascript to try and get the values from the form, I've tried multiple ways of getting the values, at the moment it's this

$(document).ready(function() {
  $('#submit').click(function() {
    var x = document.getElementById("input");
    var text = "";
    var i;
    for (i = 0; i < x.length; i++) {
      console.log(x.elements[i].value);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="input">
  First Name: <br/>
  <input type="text" name="firstName"/><br/>

  Last Name: <br/>
  <select id="lastName" style="text-align: center;">
  </select><br/>

  <p>Date of Birth:</p><br />

  Day: <br/>
  <select id="dayDropDown" style="text-align: center;">
  </select><br/>
  Month: <br/>
  <select id="monthDropDown" style="text-align: center;">
  </select><br/>
  Year: <br/>
  <select id="yearDropDown" style="text-align: center;">
  </select><br/>

  Country: <br/>
  <input type="text" name="country"/><br/>
</form>
<br/>
<button id="submit" type="button">Submit</button>

This is meant to output the values from the form to my VS the output window, but I get nothing. any ideas?

Is document.getElementById(element).elements a thing? Are you sure shouldn't be using .childNodes? — Joshua
– Joshua, Commented Oct 31, 2016 at 11:27

Rory McCrossan · Accepted Answer · 2016-10-31 11:27:40Z

2

As you're already using jQuery to attach your event handler, you may as well use it to select all the elements in the form using the :input selector. From there you can simply loop through them all using each() and output their values to the console, like this:

$(document).ready(function() {
  $('#submit').click(function() {
    $('form :input').each(function() {
      console.log($(this).val());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="input">
    First Name: <br/>
    <input type="text" name="firstName"/><br/>

    Last Name: <br/>
    <select id="lastName" style="text-align: center;">
    </select><br/>

    <p>Date of Birth:</p><br />

    Day: <br/>
    <select id="dayDropDown" style="text-align: center;">
    </select><br/>
    Month: <br/>
    <select id="monthDropDown" style="text-align: center;">
    </select><br/>
    Year: <br/>
    <select id="yearDropDown" style="text-align: center;">
    </select><br/>

    Country: <br/>
    <input type="text" name="country"/><br/>
</form>
<br/>
<button id="submit" type="button">Submit</button>

answered Oct 31, 2016 at 11:27

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Dekel Over a year ago

Not sure about the downvoters, but I dont think this answers the original question. His code works (even though it's not a good javascript/jQuery code, and can be written much better with jQuery...)

secelite Over a year ago

Good approach, but I assume the OP also wants the values of the select fields too, if they would be filled. (+1 although)

Rory McCrossan Over a year ago

@secelite this will get that. There are just no options in his current HTML to retrieve

Rory McCrossan Over a year ago

@RobertAKARobin very possibly. However it would depend on what OPs intended use is. If he wants to work with the values directly in this loop then there's no point looping to create an array and looping again to process it. If he wants to store the array for use in multiple places the serializeArray() would be more appropriate

secelite Over a year ago

@RoryMcCrossan I wasn't aware of this. Thanks for also expending my knowledge.

|

Rory McCrossan · Accepted Answer · 2016-11-03 13:49:58Z

1

You can use jQuery and get the data with one statement

var queryString = $('#input').serialize();

See this live example for a demo.

edited Nov 3, 2016 at 13:49

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Oct 31, 2016 at 11:33

lordkain

3,1191 gold badge16 silver badges18 bronze badges

1 Comment

RobertAKARobin Over a year ago

.serializeArray would probably be closer to what OP wants.

Kamuran Sönecek · Accepted Answer · 2016-10-31 11:30:46Z

0

getElementsByTagName will solve your problem.

This is your code as modificated:

 $(document).ready(function () {
        $('#submit').click(function () {
            var x = document.getElementsByTagName("input");
            var text = "";
            var i;
            for (i = 0; i < x.length; i++) {
                console.log(x[i].value);
            }
        });
    });

answered Oct 31, 2016 at 11:30

Kamuran Sönecek

3,3402 gold badges37 silver badges60 bronze badges

2 Comments

DBS Over a year ago

Seems odd to use vanilla JS when JQuery's already being used, plus this won't work for the select elements.

Kamuran Sönecek Over a year ago

this just for inputs. I you want to run it for selects too, you should add this var y = document.getElementsByTagName("select") then concat these arrays.

prasanth · Accepted Answer · 2016-10-31 11:34:24Z

Apply with same Id name with all input . your javascript was working ...

$(document).ready(function () {
        $('#submit').click(function () {
            var x = document.getElementById("input");
            var text = "";
            var i;
            for (i = 0; i < x.length; i++) {
                console.log(x.elements[i].value);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="input">

        First Name: <br/>
        <input type="text" name="firstName" id="input"/><br/>

        Last Name: <br/>
        <select id="lastName" style="text-align: center;" id="input">
        </select><br/>

        <p>Date of Birth:</p><br />

        Day: <br/>
        <select id="dayDropDown" style="text-align: center;" id="input">
        </select><br/>
        Month: <br/>
        <select id="monthDropDown" style="text-align: center;" id="input" >
       
  </select><br/>
        Year: <br/>
        <select id="yearDropDown" style="text-align: center;" id="input">
        </select><br/>

        Country: <br/>
        <input type="text" name="country" id="input"/><br/>
    </form>
    <br/>
    <button id="submit" type="button">Submit</button>

M. A. Cordeiro · Accepted Answer · 2016-10-31 11:57:20Z

0

I'd suggest that you add the jquery-serialize-object reference,so it may do the things become a bit easier:

 $('#input').submit(function(){
   var objForm = $(this).serializeObject();
    console.log(objForm);
 });

Here you can find other examples and the jquery-serialize-object library for downloading

edited Oct 31, 2016 at 11:57

answered Oct 31, 2016 at 11:41

M. A. Cordeiro

4798 silver badges14 bronze badges

Comments

Mark · Accepted Answer · 2016-11-01 10:47:27Z

-1

$(document).ready(function () {
    $('#submit').click(function () {
        $('form input, form select').each(function () {
            console.log($(this).val());
        });
    });
});

answered Nov 1, 2016 at 10:47

Mark

1,6631 gold badge12 silver badges30 bronze badges

Collectives™ on Stack Overflow

Get values from HTML form

6 Answers 6

9 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related