how to select empty input in each loop?

Question

I am trying to loop through a form of inputs and pushing all the input values to an array for some manipulation later in my code. On the other hand, when I loop through each input, I would like to check if the selected input is empty, if its empty I want to set its value to "-". Here is what I have so far--

When I run and test this code, the correct value is not outputted. What am I missing?

$('.NewTeam').eq(i).find('tr').each(function(event) { 

  //each row is one player
  var Player = []; //A new array for every player

  TeamInfo = TeamInfo + "\n Player " + counter + "\n";

  $(this).find(":input").each(function() {
    if ($(this).value == "") {
      $(this).val("--");
      TeamInfo = TeamInfo + this.value + "  , " + " ";
      Player.push(this.value);
    }
    TeamInfo = TeamInfo + this.value + "  , " + " ";
    Player.push(this.value);
  });

  counter++;
  TeamArray.push(Player);

});

Answer 1

I think you are mixing up uses of value. $(this).value is not a valid property. jQuery has a method val() that returns this.value. So you need to call $(this).val() consistently. Below I have removed the if statement and instantiated a tmp variable called value. The way I assign it is var value = $(this).val() || "--"; What this is saying is make value equal to the value of this node, unless it is falsey, then set it to "--". I also removed some unnecessary concatenation in your strings.

  $('.NewTeam').eq(i).find('tr').each(function (event) {   //each row is one player
        var Player = []; //A new array for every player
        TeamInfo = TeamInfo +"\n Player " + counter + "\n";

        $(this).find(":input").each(function(){

          var value = $(this).val() || "--";

          TeamInfo = TeamInfo + value + "  ,  ";
          Player.push(this.value);
        });
        counter++;
        TeamArray.push(Player);
  });

Let me know if you have any other questions