使用 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（通过添加计数），要么通过 class 引用。那会起作用，但是对多个字段使用相同的 ID 并不是一个好主意。

Post函数体和我可以提供更详细的帮助。

好的，所以他们确实有相同的 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 (concat as string)，并将其添加到更新函数的调用中这可能无法编译，但给了你一个想法：

$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 更新部分将完美运行。

Answer 2

那是我的 test.php 页面

    <?php
    session_start();
    include("config.php");
    global $kon;
    ob_start();

    print_r($_POST["txtHidd"]);

    foreach ($_POST["txtHidd"] as $id => $id_prod) {
        foreach ($id_prod as $kolicina) {
            echo "<br />Id : {$id} and quantity : {$kolicina}<br />";
        }
    }


    ob_flush();
?>

下一个是我点击 post 时得到的结果：

Array ( [17] => Array ( [kolicina] => ) [18] => Array ( [kolicina] => ) [19] => Array ( [kolicina] => ) [20] => Array ( [kolicina] => ) )
Id : 17 and quantity :

Id : 18 and quantity :

Id : 19 and quantity :

Id : 20 and quantity :

使用 javascript 更新多个字段

Updating multiple field with javascript

javascript

hidden-field