使用 JQuery 提交表单不会追加到列表答案

【问题标题】：Submit form using JQuery won't append to list使用 JQuery 提交表单不会追加到列表
【发布时间】：2021-12-19 00:56:57
【问题描述】：

我需要能够通过表单提交并使用 jquery 附加到有序列表来附加到列表（它是排行榜，但这不相关）。当我按下提交时，除了按下按钮之外什么都没有发生。我哪里错了？

HTML：

<main>
  <ol class="playerList">
    <li>Profit - 12,565</li>
    <li>carpe - 11,423</li>
    <li>Fate  -  11,003</li>
    <li>Fleta  -  10,931</li>
    <li>Fury  -  10,704</li>
    <li>Gesture  -  10,601</li>
    <li>Choihyobin  -  10,012</li>
    <li>MekO  -  9,879</li>
    <li>Birdring  -  9,850</li>
    <li>Mano  -  9,766</li>
  </ol>
</main>

<footer>
    <form id="submissionForm">
      <label id="nameLabel" for="pName"><u>Player name:</u></label>
      <input id="pName" type="text" placeholder="Enter player name...">
      <label for="pElims"><u>Elimination Count:</u></label>
      <input id="pElims" type="text" placeholder="Enter elimination count...">
      <input id="submitBtn" type="submit">
    </form>
</footer>

JQuery:

$(document).ready(function() {

$("#submissionForm").on('submit', function(event){
    event.preventDefault();
    error = false;
    $(".error").hide();
    var playerName = $("#pName").var();
    var elimCount = $("#pElim").var();
    var newItem = (playerName + "  -  "+ elimCount);

    $('.playerList').append('<li>'+ newItem + '</li>');
    return false;
   });
});

【问题讨论】：

尝试查看 F12 控制台选项卡....有帮助吗？具体来说......你打算用$("#pName").var(); 和$("#pElim").var(); 做什么？
所以，我希望将 #pName 和 #pElim 并连接（认为是这个词？）到一个字符串中，然后将该字符串添加到我的列表中。当我在家时，我会尝试你将 Var 更改为 Val 的建议，我会告诉你的。谢谢！

标签： javascript html jquery forms

【解决方案1】：

.var() 不是获取输入元素值的有效方法。此外，elim 计数上的 id 与 HTML 元素上的 id 不匹配。

var playerName = $("#pName").var();
var elimCount = $("#pElim").var();

应该是：

var playerName = $("#pName").val();
var elimCount = $("#pElims").val();

【讨论】：

完全正确，非常感谢，让我这么头疼！