javascript - 使用 javascript 更新多个字段

Question

我有下一个表格:

<?php
            echo "<form action=\"test.php\" method=\"post\">";
            $rez = mysqli_query($kon, "SELECT * FROM shops");
            while($red = mysqli_fetch_assoc($rez)){
                $niz = array(
                       array($red["id"],$red["naam"])
                );
                echo "<div class=\"col-xs-12  col-sm-12\">
                      <input class=\"hidd\" type=\"hidden\" name=\"txtHidd[". $red["id"] ."][kolicina]\" id=\"txtHidd\" value=\"\"/>
                      <div class=\"col-sm-2 col-xs-4\">
                        <div class=\"form-group\">
                            <input id=\"quan\" class=\"form-control\" type=\"number\" value=\"0\" min=\"0\" max=\"10\" onChange=\"proces();\"/>
                        </div>
                      </div>
                      <div class=\"col-sm-10 col-xs-8\">
                        Informacije
                      </div>


                      </div>
                    <div class=\"footer\" style=\"position: fixed;bottom: 0;width: 100%;left:0;\">
                        <a href=\"home.php\" title=\"Ga terug\" class=\"col-xs-6 col-sm-6 btn btn-info\"><span class=\"glyphicon glyphicon-chevron-left\"></span> Niets toevoegen</a>
                        <button class=\"col-xs-6 col-sm-6 btn btn-danger\" type=\"submit\" name=\"btnNaruci\" id=\"btnNaruci\">
                            Leg in winkelmand <span class=\"glyphicon glyphicon-chevron-right\"></span><span class=\"glyphicon glyphicon-chevron-right\"></span><span class=\"glyphicon glyphicon-chevron-right\"></span>
                        </button>
                    </div>";
            }
                 echo "</form>";

        ?>

我想为每个结果更新这个隐藏字段。我现在有 5 个结果，但如果我增加数量，则只有增加第一个结果的数量，隐藏字段才会获得值。

我通过数量输入字段进行了onChange，然后在javascript中我获取该字段的值并将其添加到隐藏字段的值中，但是隐藏字段的值仅针对while循环中的第一个结果进行更改..

提前致谢...

Answer 1

我需要您的 proces() 函数的主体来确定，但我认为您通过 id 引用您的输入字段，所有 5 个输入字段都具有相同的 id。只有首先更新，这就是问题所在。要么给出不同的 id(通过添加计数)，要么按类引用。这可行，但是多个字段具有相同的 id 并不是一个好主意。

发布函数的主体，我可以提供更详细的帮助。

好的，所以他们确实有相同的 ID。您可以按类(class)更新它们，如下所示:

var quan = document.getElementById("quan").value; 
var hiddenfields = document.getElementsByClassName('hidd');
for (var i = 0; i < hiddenfields.length; ++i) {
    var item = hiddenfields[i];  
    item.value = quan;
}

或者，如果可以的话，可以使用 JQuery:

var quan = $("#quan").val();
$( ".hidd" ).val(quan);

根据您的评论:

我明白了。我认为最简单的方法是执行以下操作: 在您的 php 代码中添加 id (作为字符串连接)，并将其添加到更新函数的调用中 这可能无法编译，但给你一个想法:

$i = 1; 
while($red = mysqli_fetch_assoc($rez)){
                // ...
                echo "<div class=\"col-xs-12  col-sm-12\">
                // ...
                      <input class=\"hidd\" type=\"hidden\" name=\"txtHidd[". $red["id"] ."][kolicina]\" id=\"txtHidd".$i."\" value=\"\"/>
                      <div class=\"col-sm-2 col-xs-4\">
                        <div class=\"form-group\">
                            <input id=\"quan".$i."\" class=\"form-control\" type=\"number\" value=\"0\" min=\"0\" max=\"10\" onChange=\"proces('quan".$i."', 'txtHidd".$i."');\"/>
                        </div>
                      </div>
                // ...
                    </div>";
                $i++;

在 javascript 中，更新函数将使用参数

function proces(quanID, hiddenID) {
    var quan = document.getElementById(quanID).value;         
    document.getElementById(hiddenID).value = quan;
}

再次编辑

我发现 id 字段中的 /" 位置错误。 更新了示例代码。基本上你的 html 输出应该是这样的(我没有包含名称，因为这并不重要，现在我们只看 id-s):

             ...

            <input class="hidd" type="hidden" name="xxxxx" id="txtHidd1" value=""/>
                  <div class="col-sm-2 col-xs-4">
                    <div class="form-group">
                        <input id="quan1" class="form-control" type="number" value="0" min="0" max="10" onChange="proces('quan1', 'txtHidd1');"/>
                    </div>
                  </div>


            ...

             ...

            <input class="hidd" type="hidden" name="xxxxxx" id="txtHidd2" value=""/>
                  <div class="col-sm-2 col-xs-4">
                    <div class="form-group">
                        <input id="quan2" class="form-control" type="number" value="0" min="0" max="10" onChange="proces('quan2', 'txtHidd2');"/>
                    </div>
                  </div>


            ...

查看 id-s 和函数的调用。如果是这样，JavaScript 更新部分将完美运行。