Access multiple input field values with jQuery

Question

How do you access multiple input field values using jQuery? I've fiddled with .serialize() and .formSerialize() but those are not working for me.

Current Form Setup

<form class="user__inputs hidden" id="user__activity__input">
  <label class="user__labels" id="userSteps" for="userStepsInput">Number of Steps:</label><br>
  <input aria-labelledby="userSteps" type="number" min="0" id="number__of__steps" name="userStepsInput" placeholder="Enter Steps.."><br>
  <label class="user__labels" id="userActive" for="userStepsInput">Active Minutes:</label><br>
  <input aria-labelledby="userActive" type="number" min="0" id="active__minutes" name="userStepsInput" placeholder="Enter Minutes..">
  <label class="user__labels" id="userStairs" for="userStepsInput">Flight of Stairs:</label><br>
  <input aria-labelledby="userStairs" type="number" min="0" id="flights_stairs" name="userStepsInput" placeholder="Enter Flights..">
  <input type="submit" for="userStepsInput" value="Submit" onchange="runThis()">
</form>

Current jQuery Attempt This was to see if I can even get access to my entered values.

function runThis() {
  console.log($('#user__activity__input').serialize())
}

PeterKA · Accepted Answer · 2020-10-28 00:54:25Z

1

It's always good practice to keep your HTML and JavaScript separate. If all you want is to be able to see you input values you can use the following setup.

$(function() {
    $('#user__activity__input').on('submit', runThis);
});

function runThis(e) {
  e.preventDefault();
  console.log($(this).serialize());
  //or validate the data before submitting it as follows:
  //this.submit();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="user__inputs hidden" id="user__activity__input">
  <label class="user__labels" id="userSteps" for="userStepsInput">Number of Steps:</label><br>
  <input aria-labelledby="userSteps" type="number" min="0" id="number__of__steps" name="userStepsInput" placeholder="Enter Steps.."><br>
  <label class="user__labels" id="userActive" for="userStepsInput">Active Minutes:</label><br>
  <input aria-labelledby="userActive" type="number" min="0" id="active__minutes" name="userStepsInput" placeholder="Enter Minutes..">
  <label class="user__labels" id="userStairs" for="userStepsInput">Flight of Stairs:</label><br>
  <input aria-labelledby="userStairs" type="number" min="0" id="flights_stairs" name="userStepsInput" placeholder="Enter Flights..">
  <input type="submit" for="userStepsInput" value="Submit">
</form>

answered Oct 28, 2020 at 0:54

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

1 Comment

mfaccord Over a year ago

Awesome! Thank you for the help! I'm able to get some movement with my data now. I really appreciate it.

Dan B · Accepted Answer · 2020-10-28 01:12:33Z

1

PeterKA has a good solution to get you moving.

To build on their answer, this will help you when dealing with the data. It would be best to change the for= and respective name= to unique values per label/input set. Then any backend you send this form to will be able to understand what each value is.

Example:
Label: for="userStepsInput"
Input: name="userStepsInput"

Label: for="userMinutesInput"
Input: name="userMinutesInput"

Label: for="userFlightsInput"
Input: name="userFlightsInput"

This should then return userStepsInput=3&userMinutesInput=4&userFlightsInput=3 rather than the ambiguous userStepsInput=8&userStepsInput=4&userStepsInput=3

answered Oct 28, 2020 at 1:12

Dan B

1005 bronze badges

2 Comments

mfaccord Over a year ago

Great! I ran into this and was trying to think of a work around. I really appreciate the insight!

Dan B Over a year ago

No problem glad it helped! Once you get the hang of forms you can do alot with them and backends.

Collectives™ on Stack Overflow

Access multiple input field values with jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related