I'm making a fifa style html where two players have to choose a team.
I'm using 2 carousels with all the teams as images and I want the selected images (teams) to be stored as information in a Form to be used later to show certain players, how could I do it?
I used a hidden input but ALL teams get stored in the form instead of the active one.
This is my current code of one of the Carousels:
<div class="row team-container">
<div id="carouselExampleInterval" class="carousel slide col-3 team-box" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img name='idTeam' src="/images/Select1.png" class="d-block w-100" value='1'>
<input id="idTeam" name='idTeamH' type="hidden" value="1">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select2.png" class="d-block w-100" value='2'>
<input id="idTeam" name='idTeamH' type="hidden" value="2">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select3.png" class="d-block w-100" value='3'>
<input id="idTeam" name='idTeamH' type="hidden" value="3">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select4.png" class="d-block w-100" value='4'>
<input id="idTeam" name='idTeamH' type="hidden" value="4">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select5.png" class="d-block w-100" value='5'>
<input id="idTeam" name='idTeamH' type="hidden" value="5">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select6.png" class="d-block w-100" value='6'>
<input id="idTeam" name='idTeamH' type="hidden" value="6">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select7.png" class="d-block w-100" value='7'>
<input id="idTeam" name='idTeamH' type="hidden" value="7">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select8.png" class="d-block w-100" value='8'>
<input id="idTeam" name='idTeamH' type="hidden" value="8">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select9.png" class="d-block w-100" value='9'>
<input id="idTeam" name='idTeamH' type="hidden" value="9">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select10.png" class="d-block w-100" value='10'>
<input id="idTeam" name='idTeamH' type="hidden" value="10">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select11.png" class="d-block w-100" value='11'>
<input id="idTeam" name='idTeamH' type="hidden" value="11">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select12.png" class="d-block w-100" value='12'>
<input id="idTeam" name='idTeamH' type="hidden" value="12">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select13.png" class="d-block w-100" value='13'>
<input id="idTeam" name='idTeamH' type="hidden" value="13">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select14.png" class="d-block w-100" value='14'>
<input id="idTeam" name='idTeamH' type="hidden" value="14">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select15.png" class="d-block w-100" value='15'>
<input id="idTeam" name='idTeamH' type="hidden" value="15">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select16.png" class="d-block w-100" value='16'>
<input id="idTeam" name='idTeamH' type="hidden" value="16">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select17.png" class="d-block w-100" value='17'>
<input id="idTeam" name='idTeamH' type="hidden" value="17">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select18.png" class="d-block w-100" value='18'>
<input id="idTeam" name='idTeamH' type="hidden" value="18">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select19.png" class="d-block w-100" value='19'>
<input id="idTeam" name='idTeamH' type="hidden" value="19">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select20.png" class="d-block w-100" value='20'>
<input id="idTeam" name='idTeamH' type="hidden" value="20">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Check out this snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
function selectPlayer(player_img){
document.myForm.selected_player.value = player_img.id;
}
</script>
</head>
<body>
<div class="row team-container">
<div id="carouselExampleInterval" class="carousel slide col-3 team-box" data-interval="false">
<div class="carousel-inner">
<form name="myForm">
<div class="carousel-item active">
<img id='idTeam_1' src="/images/Select1.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_2' src="/images/Select2.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_3' src="/images/Select3.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_4' src="/images/Select4.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_5' src="/images/Select5.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_6' src="/images/Select6.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_7' src="/images/Select7.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_8' src="/images/Select8.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_9' src="/images/Select9.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_10' src="/images/Select10.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_11' src="/images/Select11.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_12' src="/images/Select12.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_13' src="/images/Select13.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_14' src="/images/Select14.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_15' src="/images/Select15.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_16' src="/images/Select16.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_17' src="/images/Select17.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_18' src="/images/Select18.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_19' src="/images/Select19.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_' src="/images/Select20.png" class="d-block w-100 idTeam" value='20' onclick="selectPlayer(this);">
</div>
<input id="idTeam_20" name='selected_player' type="hidden">
</form>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>I have taken following steps to solve problem as well as to improve code:
<form> to access our <input type="hidden"> so create form inside <div class="carousel-inner">.<input type="hidden"> not 20, so removed extra <input type="hidden"> and place it inside <form name="myForm">.name and value not applies to <img> unless we aren't doing andy image-mapping, so I removed them.<img> elements.selectPlayer takes single parameter. We used to pass image through that parameter and store its id inside our <input type="hidden">.selectPlayer on clicking of player images and pass the image as parameter.