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?
1 answers
solution1
1 ACCPTED 2020-03-05 13:47:31
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.