使用 jQuery 访问多个输入字段值答案

【问题标题】：Access multiple input field values with jQuery使用 jQuery 访问多个输入字段值
【发布时间】：2020-10-28 09:12:33
【问题描述】：

如何使用 jQuery 访问多个输入字段值？我已经摆弄了 .serialize() 和 .formSerialize() 但它们对我不起作用。

当前表单设置

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

当前的 jQuery 尝试 这是为了看看我是否可以访问我输入的值。

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

【问题讨论】：

标签： javascript html jquery forms

【解决方案1】：

最好将HTML 和JavaScript 分开。如果您只想看到您输入的值，您可以使用以下设置。

$(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>

【讨论】：

太棒了！感谢您的帮助！我现在可以对我的数据进行一些移动。我真的很感激。

【解决方案2】：

PeterKA 有一个很好的解决方案让你动起来。

以他们的回答为基础，这将在处理数据时为您提供帮助。最好将for= 和各自的name= 更改为每个标签/输入集的唯一值。然后，您将此表单发送到的任何后端都将能够理解每个值是什么。

示例：
标签：for="userStepsInput"
输入：name="userStepsInput"

标签：for="userMinutesInput"
输入：name="userMinutesInput"

标签：for="userFlightsInput"
输入：name="userFlightsInput"

这应该返回 userStepsInput=3&userMinutesInput=4&userFlightsInput=3 而不是模棱两可的 userStepsInput=8&userStepsInput=4&userStepsInput=3

【讨论】：

太棒了！我遇到了这个问题，并试图想办法解决这个问题。我真的很感激你的洞察力！
没问题，很高兴它有帮助！一旦掌握了表单的窍门，您就可以对它们和后端做很多事情。