Submit form using JQuery won't append to list-CodePudding

I need to be able to append to a list (it's a leaderboard, but that's not relevant) by submitting through a form and appending to an ordered list using jquery. When I press submit nothing happens other than the button being pressed. Where am I going wrong?

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

CodePudding user response：

.var() is not a valid way to get an input element's value. Also, the id on the elim count does not match the id on the HTML element.

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

It should be:

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