javascript - 如何使用 Array.from 和 forEach 从多个表单字段值中获取值

Question

假设我有一个表格:

<form>
  <input type="text" class="blanked">
  <input type="text" class="blanked">
  <input type="text" class="blanked">
  <input type="submit" value="Press Me">
</form>

现在假设我使用 getElementsByClassName 创建这些元素的数组:

letfilledBlanks = Array.from(document.getElementsByClassName('blanked'));

现在我想迭代用户在每个输入中输入的值:

filledBlanks.forEach( filledBlank => {
  let inputText = filledBlank.???;
} 

这就是我被绊倒的地方。我用什么来获取填充值(而不是.value)？或者有更好的方法来实现这一点吗？

Answer 1

.value 属性工作得很好。我不明白你为什么需要别的东西。如果您只想迭代这些值，您可以先映射您的输入，但我不明白这一点。

请注意，我仅使用 Jquery 来监听 submit 事件。剩下的就是纯粹的 Javascript。

$('form').on('submit', (event) => {
  event.preventDefault();
  
  let filledBlanks = Array.from(document.getElementsByClassName( 'blanked' ));
  filledBlanks.map((input) => {
    return input.value;
  }).forEach((value) => {
    console.log(value);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" class="blanked">
  <input type="text" class="blanked">
  <input type="text" class="blanked">
  <input type="submit" value="Press Me" id="submit">
</form>