How to submit information in a form from an Image in a Carousel

Question

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>

We must provide seperate ids to each player through `id`attribute and set their value based on which player is selected. Actually we need only 1 hidden field here in which we save name/id of the player which get selected. — gpl, Aug 31 '20 at 05:36
" I want the selected images (teams) to be stored as information in a Form " - what you mean by that? Are you saving image-data????? The binary image-data???? — gpl, Sep 01 '20 at 04:55
No, I have 2 carousels (I only put the code for one of the carousels), each showing a gallery of images, each image representing a team. After 2 players select their teams (by select I mean click the arrows until they find their wanted team) I want to press a button (submit) to submit the id or something so after pressing the button the browser redirects to another view and loads the info of the selected teams. So the form has to include everything I assume?? — Stefano Bras, Sep 01 '20 at 17:45

gpl · Accepted Answer · 2020-08-31T06:46:56.137

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:

We need <form> to access our <input type="hidden"> so create form inside <div class="carousel-inner">.
There is just a single peice of information, that is which player is selected, we need single <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.
Give unique ids to all <img> elements.
Inside JavaScript created function selectPlayer takes single parameter. We used to pass image through that parameter and store its id inside our <input type="hidden">.
Call our function selectPlayer on clicking of player images and pass the image as parameter.

Thanks for the response! But nothing happens when I click the image of the team I want to select but even if it would the information should get processed after I click a button after both teams are selected (the image you leave in the carousel when you click the button), i dont know what to do. — Stefano Bras, Sep 01 '20 at 01:56

How to submit information in a form from an Image in a Carousel

1 Answers1