Andrew Nguyen Andrew Nguyen - 1 year ago 64
HTML Question

Changing text of input field on click

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>

JAG JAG
Answer Source

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!.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download