PHP Looped Array, jquery to print each id value

Question

So far I have managed that when a button is clicked it will print all values within the array. I need it to be smarter and only print the value of the element clicked.

<?php 

$Arr_shoppingList = array( 
    array("Volvo",22,18,0),
    array("BMW",15,13,1),
    array("Saab",5,2,2),
    array("Land Rover",17,15,3)
);



//Looped through array and printed values
foreach ($Arr_shoppingList as $value) {
                echo "<div class='ColumnRow Spacing Color2 Border'>";
                echo "<h1> $value[0] </h1> <br>";
                echo "<p>'MPG'. $value[1]</p> <br>";
                echo "<p>'Stock' . $value[2]</p> <br>";
                echo "<form method='GET'>";
                echo "<button class='Border' type='submit' id='$value[0]' class='Button'> $value[0] 
                      </button>";
                echo "</form>";
                echo "</div>";
        }
?>

<script>

    $('button').on('click', function (event) {
        event.preventDefault()

    $('button').each(function(index, value){
        console.log(value.id)
    })
});

</script>

EDIT: The first section has been completed many thanks, but similarly, but I also need the stock and MPG values to also be targeted, how would I go about incorporating that into this code? this is part of a checkout basket I'm attempting to create.

Harshana · Accepted Answer · 2020-12-06 08:47:32Z

1

You can use event.target.id to get the id of the clicked element

<?php 

$Arr_shoppingList = array( 
    array("Volvo",22,18,0),
    array("BMW",15,13,1),
    array("Saab",5,2,2),
    array("Land Rover",17,15,3)
);



//Looped through array and printed values
foreach ($Arr_shoppingList as $value) {
                echo "<div class='ColumnRow Spacing Color2 Border'>";
                echo "<h1> $value[0] </h1> <br>";
                echo "<p>'MPG'. $value[1]</p> <br>";
                echo "<p>'Stock' . $value[2]</p> <br>";
                echo "<form method='GET'>";
                echo "<button class='Border' type='submit' id='$value[0]' class='Button'> $value[0] 
                      </button>";
                echo "</form>";
                echo "</div>";
        }
?>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

    $('button').on('click', function (event) {
        event.preventDefault()
        console.log(event.target.id);

    
});

</script>

answered Dec 6, 2020 at 8:47

Harshana

5,5661 gold badge22 silver badges30 bronze badges

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

2 Comments

JD Dev Over a year ago

EDIT: The first section has been completed many thanks, but similarly, but I also need the stock and MPG values to also be targeted, how would I go about incorporating that into this code? this is part of a checkout basket I'm attempting to create.

Harshana Over a year ago

You can try getting those elements via element.target.parentNode.parentNode

Collectives™ on Stack Overflow

PHP Looped Array, jquery to print each id value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related