Changing text of input field on click

Question

Objective

In my if-else statement when a .player has the class picked.is-inactive the text of the input field should be blank, but right now it's the name of last clicked player.
Right now, when a player is selected all 20 input fields have their text changed to the player last clicked. However, the name of the first player with picked.is-active should be put into the first input field #p1 and so on until all 20 players have been selected and the 20 input fields are filled.

scripts.js

// Every time a player is clicked, note the name of the player
$(".player").on("click", function(){

    // Get the name of that player, only if picked.is-active
    // Put the text of that player into the appropriate input field

    if ($(this).find("picked.is-active")) {
        var playerName = $(this).find(".player__name").html();
        $("input").val(playerName);
        console.log(playerName);
    } else {
        $("input").val("")
    }
});

index.html (Form)

    <form id="form">
        <input type="text" name="p1"  id="p1" required>
        <input type="text" name="p2"  id="p2" required>
        <input type="text" name="p3"  id="p3" required>
        <input type="text" name="p4"  id="p4" required>
        <input type="text" name="p5"  id="p5" required>
        <input type="text" name="p6"  id="p6" required>
        <input type="text" name="p7"  id="p7" required>
        <input type="text" name="p8"  id="p8" required>
        <input type="text" name="p9"  id="p9" required>
        <input type="text" name="p10" id="p10" required>
        <input type="text" name="p11" id="p11" required>
        <input type="text" name="p12" id="p12" required>
        <input type="text" name="p13" id="p13" required>
        <input type="text" name="p14" id="p14" required>
        <input type="text" name="p15" id="p15" required>
        <input type="text" name="p16" id="p16" required>
        <input type="text" name="p17" id="p17" required>
        <input type="text" name="p18" id="p18" required>
        <input type="text" name="p19" id="p19" required>
        <input type="text" name="p20" id="p20" required>
        <button type="submit">
            Submit your vote
        </button>

index.html (Player)

<div class="player player--goalie year--1970">
                    <div class="tooltip tooltip--tall">
                        <p class="tooltip__name">Glen Hanlon</p>
                        <p class="tooltip__hometown"><span>Hometown:</span> Brandon, Man.</p>
                        <p class="tooltip__years"><span>Years Played:</span> 1974-1977</p>
                        <div class="tooltip__stats--inline">
                            <div class="stats__group stats--games">
                                <p class="stats__header">GP</p>
                                <p class="stats__number--games">172</p>
                            </div>

                            <div class="stats__group stats--goalsag">
                                <p class="stats__header">GA</p>
                                <p class="stats__number">4.22</p>
                                <p class="stats__number">3.99</p>
                                <p class="stats__number stats__number--goalsag">3.09</p>
                            </div>

                            <div class="stats__group stats--savep">
                                <p class="stats__header">SAV%</p>
                                <p class="stats__number">.892</p>
                                <p class="stats__number">.891</p>
                                <p class="stats__number stats__number--savep">.906</p>
                            </div>

                            <div class="stats__group stats--shutouts">
                                <p class="stats__header">SO</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number stats__number--shutouts">4</p>
                                <p class="stats__number">4</p>
                            </div>
                        </div> <!-- tooltip__stats--inline -->
                    </div> <!-- tooltip -->
                    <div class="player__headshot player--hanlon">
                        <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
                    </div>
                    <p class="player__name" value="Glen Hanlon">Glen Hanlon</p>
                    <p class="player__position">Goalie</p>
                </div>

Ja9ad335h · Accepted Answer · 2016-08-10 19:41:11Z

1

you need to tell what specific textbox should update.

// Every time a player is clicked, note the name of the player
$(".player").on("click", function(){
    var playerNames = [];
    $("input:text").each(function(i, t) { playerNames.push(t.value) });

    if ($(this).find("picked.is-active")) {
        var playerName = $(this).find(".player__name").html();
        var index = playerNames.indexOf(playerName);

        if(index == -1) // add player
            $("input:text:eq(" + playerNames.indexOf("") + ")").val(playerName);
        else // remove player
            $("input:text:eq(" + index + ")").val("");           
    } else {
        $("input").val("");
    }
});

Explanation

on each click, getting all text box values into an arry playerNames using $.each loop

then check the active (or clicked) playerName already exists in the playerNames array or not.

if not exists (i.e index == -1) then add it to next empty textbox

playerNames.indexOf("") brings the index of next empty textbox

else remove it from the textbox where it exists.

Hope this helps!.

edited Aug 10, 2016 at 19:41

answered Aug 10, 2016 at 16:30

Ja9ad335h

5,0652 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrew Nguyen Over a year ago

This is still filling in all 20 input fields, instead of a single one. Thoughts?

Ja9ad335h Over a year ago

oh!.. i forgot to break the loop when done.. return false; updated the answer.

Andrew Nguyen Over a year ago

Very close. The only problem now is that clicking the same player a second time does not remove it from that input, but adds the same player to the next input. Any help would be appreciated here.

Andrew Nguyen Over a year ago

Awesome. If you could explain the logic behind how you got to your answer that would be amazing. It works like a charm.

Collectives™ on Stack Overflow

Changing text of input field on click

Objective

scripts.js

index.html (Form)

index.html (Player)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Objective

scripts.js

index.html (Form)

index.html (Player)

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related