CODEWITHSUNDEEP
javascripthtmljqueryforms
mfaccord
mfaccord

Reputation: 225

Access multiple input field values with jQuery

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

Upvotes: 0

Views: 54

Answers (2)

Dan B
Dan B

Reputation: 100

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

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

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>

Upvotes: 1

Related Questions