使用 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())
}

Answer 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>

Answer 2

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