Using Jquery .each function in a PHP foreach loop

Question

I am quite new to jquery, and i couldn't use .each function in a php foreach function. I am trying to do a quantity, unit price, total price table. I don't know how many table rows does user need, therefore used foreach function. Here is an example what i am trying to do:

my deneme2.php file :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= <script type="text/javascript">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>deneme5.js</script>
</head>
<body>
<?php
$arr=[1,2];
foreach ($arr as $key=>$val){ ?>
<div>
    <input id="tst1"; type="text"; >
    <input id="tst2"; type="text"; >
    <input id="tst3"; type="text"; > <br><br>
  </div>
<?php } ?>
<input  id="asd"; type="submit"; value="hesapla">
</body>
</html>

And my deneme5.js file:

$(function(){
    $("#asd").click(function(){

        $("div").each(function(index){

            var a=$("#tst1").val();
            var b=$("#tst2").val();
            var c= parseInt(a)*parseInt(b);
            $("#tst3").val(c);

              });

    });


  });

Can you help me? what am i doing wrong?

ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements. — Jay Blanchard
– Jay Blanchard, Commented Mar 5, 2020 at 13:59

Jay Blanchard · Accepted Answer · 2020-03-05 14:11:44Z

1

You have many syntax errors in your code. I have revised it a bit. Please compare it with yours and see where you have your mistakes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- here i have added your javascript code directly. You can include it like that: <script src="deneme5.js"></script>-->
    <script>
    $(function(){
      $("#asd").click(function()  {

        $(".row").each(function(index, element){
          var a = $(element).find(".tst1").val();
          var b = $(element).find(".tst2").val();
          var c = parseInt(a) * parseInt(b);
          $(element).find(".tst3").val(c);
        });

      });
    });
    </script>

</head>
<body>

<?php
$arr=[1,2];
foreach ($arr as $key=>$val){ ?>
<!-- in the following i have switched your ids into classes because ids have to be unique. Furthermore html attributes do not have to be separated by ';' -->
<div class="row">
    <input class="tst1" type="text">
    <input class="tst2" type="text">
    <input class="tst3" type="text"><br><br>
  </div>
<?php } ?>
<input id="asd" type="submit" value="hesapla">

</body>
</html>

One of the things done here was to convert the use of ID's to classes. ID's cannot be duplicated on a page because it will cause problems with JavaScript and CSS.

edited Mar 5, 2020 at 14:11

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

answered Mar 5, 2020 at 13:47

Robin Gillitzer

1,6121 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jay Blanchard Over a year ago

Remember - A good answer will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO.

Robin Gillitzer Over a year ago

@JayBlanchard - Therefore i have commented my changes in the code.

Jay Blanchard Over a year ago

I understand @RobinGillitzer, but it has been found that explanations outside of code comments generally work better for folks and makes the answer more searchable.

Collectives™ on Stack Overflow

Using Jquery .each function in a PHP foreach loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related