如何从轮播中的图像以表单形式提交信息

Question

我正在制作一个 FIFA 风格 html，其中两个玩家必须选择一个团队。

我正在使用 2 个旋转木马，所有球队都作为图像，我希望将所选图像（球队）作为信息存储在表格中，以便稍后用于显示某些球员，我该怎么做？

我使用了隐藏输入，但所有团队都存储在表单中而不是活动的表单中。

这是我当前的轮播代码之一：

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

Answer 1

看看这个片段：

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

我已采取以下步骤来解决问题并改进代码：

我们需要 <form> 才能访问我们的 <input type="hidden">，所以在 <div class="carousel-inner"> 中创建表单。
只有一条信息，就是选中了哪个球员，我们需要的是单个<input type="hidden">，而不是20个，所以把多余的<input type="hidden">去掉，放在<form name="myForm">里面。
name 和 value 不适用于 <img> 除非我们不做安迪 image-mapping，所以我删除了它们。
为所有 <img> 元素提供唯一 ID。
在 JavaScript 中创建的函数 selectPlayer 采用单个参数。我们曾经通过该参数传递图像并将其 id 存储在我们的 <input type="hidden">.
在点击播放器图像时调用我们的函数 selectPlayer 并将图像作为参数传递。

如何从轮播中的图像以表单形式提交信息

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

html

javascript

forms

ejs

carousel