select specific element jquery inside php foreach loop

Question

I have foreach loop in php on front page for getting images and description of the image, inside foreach loop I have form, form is use for sending comment, this is front page..

<?php foreach ($photo as $p) : ?>
<div class="photo-box">
    <div class="galP photo-wrapper" >
        <div data-fungal="<?php echo $p->id; ?>" class='galFun-get_photo'>
            <img src="<?php echo $p->thumb; ?>" class='image'>
        </div>
    </div>
    <div class='inline-desc'>
        <a href="/gallery/user.php?id=<?php echo $p->userId; ?>">
            <?php echo $p->username; ?>
        </a>
    </div>
    <form method="POST" action="" class="form-inline comment-form galForm"> 
        <div class="form-inline">
            <input type="hidden" class='photoId form-control' name="photoId" value="<?php echo $p->id; ?>" >
            <input type="hidden" class='userId form-control' name="userId" value="<?php echo $session->userId; ?>" >
            <textarea cols="30" rows="3" class='comment fun-gal-textarea' name="comment" placeholder="Leave your comment"></textarea>
            <button type='button' name='send' class='sendComment'>SEND</button>
        </div>
    </form>
    <div class='new-comm'></div>
    <div class='comments-gal' id='comments'>
        <div data-id='<?php echo $p->id; ?>' class='getComment'>
            <span>View comments</span>
        </div>
    </div>
</div>

Using ajax I want to send userId,photoId and comment after clicking the button that has class sendComment. When I send comment on the first image everything is ok but when I try to send comment for some other image it wont work. I can't select that specific input and textarea for geting the right value .This is my jquery

    $('body').on('click','.sendComment',function(){  
    var selector = $(this);       
    var userId = selector.siblings($('.userId'));
    var photoId = selector.siblings($('.photoId'));
    var c = selector.siblings($('.comment'));  
    var comment = $.trim(c.val());
    if (comment == "" || comment.length === 0) {
        return false;
    };
        $('#no-comments').remove();
    $.ajax({
        url: '/testComment.php',
        type: 'POST',
        data: {comment:comment,userId:userId,photoId:photoId}
    }).done(function(result) {
        ...
        }
    })
});

Also, I have tried in every possible way to get the right value from the form without success..

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

This line

var userId = selector.siblings($('.userId'));

will be unlikely to get the correct input as, according to https://api.jquery.com/siblings/

.siblings( [selector ] )

selector

A string containing a selector expression to match elements against.

so this would need to be :

var userId = selector.siblings('.userId');

at that point you also need to get the actual value from the input, giving:

var userId = selector.siblings('.userId').val();
var photoId = selector.siblings('.photoId').val();
var c = selector.siblings('.comment');

and the rest of the code as-is.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 28, 2018 at 14:19

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

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

2 Comments

IncredibleHat Over a year ago

Just be careful to not have multiple siblings with the same class... then .val will be unpredictable.

fdomn-m Over a year ago

Sometimes it just takes a second set of eyes

Collectives™ on Stack Overflow

select specific element jquery inside php foreach loop

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