CODEWITHSUNDEEP
javascripthidden-field
Boky
Boky

Reputation: 12074

Updating multiple field with javascript

I have next form :

<?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>";

        ?>

I want to update this hidden field for every result. I have now 5 results but if i increase quantity, the hidden field get value only if i increase quantity of first result.

I have onChange by the quantity input field and then in javascript i get the value of that field and add it to the value of the hidden field, but the value of the hidden field is changed only for the first result in while loop..

Thanks in advance...

Upvotes: 1

Views: 765

Answers (2)

DDan
DDan

Reputation: 8276

I would need the body of your proces() function to say for sure, but I think you reference your input field by id, all 5 input fields have the same id. Only first gets updated and that's the problem. Either give different ids (by adding count) or reference by class. That would work, however having same id for multiple fields is not a good idea.

Post the body of the function and I can give more detailed help.

Ok, so they do have the same id. You could go by class to update them like this:

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

Or if it's ok tu use JQuery:

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

Based on your comment:

I see. I think simplest would be to do the following: In your php code add id (concat as string), and add it to the call of your updating function This might not compile, but gives you the idea:

$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++;

In javascript the updating function would use the parameter

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

EDIT AGAIN

I found that the /" at the id fields were in wrong position. Updated sample code. Basically your html output is supposed to look like this (I didn't include name, as it doesn't matter, now we are only looking at 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>


            ...

Looking at the id-s and the call of the function. If it's like that, the javascript update part will work perfectly.

Upvotes: 1

Boky
Boky

Reputation: 12074

That is my test.php page

    <?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();
?>

And result tha i get when i hit a post is next :

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 :

Upvotes: 0

Related Questions