jquery click function inside a php loop

Question

I have a foreach loop in php like below.

<?php
    $i = 0;
    foreach ($query as $value) { ?>
    <button id="show[<?php echo $i;?>]" class="btn btn-success" type="button">View</button>
    <div id="blah[<?php echo $i;?>]">Joel</div>
<?php 
    $i++ 
 } ?>

Now this loop work fine and I am getting id for each buttons and divs with unique id. But I want to add a jquery click function like below.

$("#show").click(function(){
$("blah").hide();
});

But since it is inside a loop and have different id's with them how to add this jquery function for each buttons?

You can do it using class instrad of id and then using this on the jQuery code. — gbestard
– gbestard, Commented Jul 18, 2014 at 10:14
but remember the class is not used by other elements, otherwise it will call click on those also — nraina
– nraina, Commented Jul 18, 2014 at 10:16

user3702775 · Accepted Answer · 2014-07-18 11:22:53Z

11

$(".btn").click(function(){
 var id = $(this).attr('id');
 var n = id.replace("show",'');
 $("#blah"+n).hide();
});

Also replace your buttons with this code

<button id="show-<?php echo $i;?>" class="btn btn-success" type="button">Clear</button>
<div id="blah-<?php echo $i;?>">Joel</div>

edited Jul 18, 2014 at 11:22

answered Jul 18, 2014 at 10:18

user3702775

2711 silver badge8 bronze badges

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

8 Comments

user1978142 Over a year ago

this is a good idea also (no idid not downvote), i think the downvote came from the strings [], just a little tweak and this should be ok too

vortex Over a year ago

this is the only answer i upvoted before adding my own, sorry kevin i'm just not a fan of making divs children of buttons ...

Joel James Over a year ago

@ user3702775 : Your login is correct. But unfortunately it doesn't work in this condition. Can you please check

user3702775 Over a year ago

Is there any console error ? Also what do you mean by login ?

user3702775 Over a year ago

@Joel Says: Also the div with id blah is supposed to be inside button tag or outside button tag. You have not closed the button tag anywhere.

|

vortex · Accepted Answer · 2014-07-18 10:24:45Z

3

for php:

<?php foreach ($query as $key => $value) {?>
<button class="btn btn-success blah-toggler" type="button" data-target="blah-<?php echo $key ?>">
<div id="blah-<?php echo $key ?>">Joel</div>
<?php }?>

then in jquery:

$(".blah-toggler").on("click", function(){
    var t = $(this);
    $('#' + t.data('target')).hide();
});

answered Jul 18, 2014 at 10:24

vortex

8528 silver badges14 bronze badges

Comments

Jonathon · Accepted Answer · 2014-07-18 10:16:13Z

2

Use a class

<button id="show[<?php echo $i;?>]" class="btn btn-success mybutton" type="button">

Then

$(".mybutton").click(function(){
    $("blah").hide();
});

answered Jul 18, 2014 at 10:16

Jonathon

16.4k12 gold badges78 silver badges98 bronze badges

Comments

user1978142 · Accepted Answer · 2014-07-18 10:20:01Z

2

Alternatively you could also use a class. Then the usual:

<?php $i = 0; ?>
<?php foreach ($query as $value): ?>
    <button class="btn btn-success toggle" type="button">
        <div id="blah[<?php echo $i;?>]">Joel</div>
    </button> <!-- missed a closing button tag -->
<?php $i++; ?>
<?php endforeach; ?>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.toggle').on('click', function(){
        $(this).children('div').hide();
    });

});
</script>

answered Jul 18, 2014 at 10:20

user1978142

7,9683 gold badges19 silver badges20 bronze badges

Comments

Pratik Joshi · Accepted Answer · 2014-07-18 11:27:29Z

2

u should use following

PHP:

<?php
    $i = 0;
    foreach ($query as $value) { ?>
    <button id="show[<?php echo $i;?>]" class="btn btn-success clickEvent" type="button">
    <div id="blah[<?php echo $i;?>]">Joel</div>
<?php 
    $i++ 
 } ?>

Here you are adding class="clickEvent" for the buttons . And At the end u will have jScript file with following content .which will take care what should happen , when the button with that class is clicked.

jQuery:

$(".clickEvent").click(function(){
$(this).next('div').hide();
});

edited Jul 18, 2014 at 11:27

answered Jul 18, 2014 at 10:15

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

4 Comments

vortex Over a year ago

is blah a tag for you or an id ?

Pratik Joshi Over a year ago

@vortex , its sample , The main logic OP asked for is important. Can u check what op asked ? What should happen after clicking is depending on OP.

vortex Over a year ago

yeah i read the question. still looks better after editing :)

Joel James Over a year ago

@jQueryAngryBird : $("#AnyElementId").hide(); How can I give the div id since all div has different ids

Arun Kumar · Accepted Answer · 2014-07-18 11:31:37Z

2

PHP:

<?php
$i = 0;
foreach ($query as $value) { ?>
<button id="show_<?php echo $i;?>" onclick=show(this.id) class="btn btn-success" type="button">
<div id="blah_<?php echo $i;?>">Joel</div>
<?php 
$i++ 
} ?>

javascript:

function show(id)
{
var arr = id.split('_');
$("#blah_"+arr[1]).hide("slow");
}

edited Jul 18, 2014 at 11:31

answered Jul 18, 2014 at 10:23

Arun Kumar

1,6331 gold badge18 silver badges33 bronze badges

2 Comments

Joel James Over a year ago

How to hide inside that javascript function?

deemi-D-nadeem Over a year ago

Nice Work ... Perfectly for me

Collectives™ on Stack Overflow

jquery click function inside a php loop

6 Answers 6

8 Comments

Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related