Note: This is a mixture of Php, Javascript and html.
I have a code below
<div class="chat-sidebar-list-wrapper pt-2">
<h6 class="px-2 pt-2 pb-25 mb-0">MAIDS</h6>
<ul class="chat-sidebar-list maid-list-wrapper">
<?php
foreach($all_maids as $all_maid){
?>
<!-- displaying looped results in <li> using php foreach method-->
<li id="<?php echo $all_maid->id?>" class="bingo">
<input type="hidden" id="hidden_receiver_id" name="hidden_receiver_id" value="<?php echo $all_maid->id?>"/>
<div class="d-flex align-items-center">
<div class="avatar m-0 mr-50"><img src="<?php echo base_url('uploads/'); ?>images/<?php echo get_user_image($all_maid->id)?>" height="36" width="36" alt="sidebar user image">
<span class="avatar-status-busy"></span>
</div>
<div class="chat-sidebar-name">
<h6 class="mb-0 maid-names"><?php echo $all_maid->first_name. "" . $all_maid->last_name ?></h6><span class="text-muted">Maid</span>
</div>
</div>
</li>
<?php } ?>
</ul>
.......
</div>
What i want is, when you click on each <li> items, you should be able to get the ID from the input tag <input type="hidden" id="hidden_receiver_id" name="hidden_receiver_id" value="<?php echo $all_maid->id?>"/>.
So how can i loop the <li> items and get each of it IDs from the input tag?
I tried something below but not working
var listItems = $(".maid-list-wrapper li");
listItems.each(function(idx, li) {
//var id = $(li).text();
alert($("li.bingo").find("input#hidden_receiver_id").text());
});
Using jQuery
var items = $(".chat-sidebar-list li");
items.each(function(id, li) {
var OneItem = $(li);
// and the rest of your code.OneItem is an object here
});
The answer is
i added class="hidden_receiver_id" to <input type="hidden" id="hidden_receiver_id" class="hidden_receiver_id" name="hidden_receiver_id" value="<?php echo $all_maid->id?>"/>
$('.maid-list-wrapper li').click(function() {
//name of each user
console.log($(this).find("h6.maid-names").text());
//ID of each user
//alert($(this).find("input[type='hidden']").val());
console.log($(this).find("input.hidden_receiver_id").val())
});
Related
I have six radio button whose id is coming dynamically in foreach loop now i have to get that value outside foreach loop. If any body know solution than please help. Below is my code
<div class="person_option-block">
<h5>No of Person</h5>
<?php
$no_of_persons = $this->Mdl_home->no_of_person_all();
foreach($no_of_persons as $no_of_person){ ?>
<label class="person_option">
<?php echo $no_of_person['person']; ?>
($ <?php echo $no_of_person['price']; ?>/person)
<input type="radio" class="person-radio" name="no_person" id="<?php echo $no_of_person['id']; ?>" value="<?php echo $no_of_person['id']; ?>"
onchange="get_makeup_service(<?php echo $no_of_person['person']; ?>)">
<input type="hidden" id="person_<?php echo $no_of_person['person']; ?>" value="<?php echo $no_of_person['person']; ?> ($<?php echo $no_of_person['price']; ?>/person)">
</label>
<?php } ?>
</div>
<div class="pull-right">
<a href="javascript:void(0);" class="custom-btn" id="step1-next-btn">
Next
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</a>
</div>
When i click on next button the id of particular radio button should alert
$('#step1-next-btn').click(function(){
$('#step1-block').hide();
$('#step2-block').show();
});
Use $('input[name=no_person]:checked').val(); expression to get the selected radio button value.
Try Using,
$(function(){
if($("#radioID").prop("checked")) {
var radioValue = $("#radioID").val();
}
});
I'm trying to post data from a single form in my PHP inside a while loop to another page using jQuery load. Currently when I view the output, only the first result gets to be submitted. When I click on the rest of the forms it keeps refreshing the page. How can I make all the forms to post unique data from my PHP page?
Here is my PHP script:
while (mysqli_stmt_fetch($select_product)): ?>
<div class="col-md-4 top_brand_left" style="margin-top:40px;">
<div class="hover14 column">
<div class="tm_top_brand_left_grid">
<div class="tm_top_brand_left_grid_pos">
</div>
<div class="tm_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img class="lazy" title="" alt="" src="/web/images/spinner.gif" data-original="/web/images/<?php echo $product_image; ?>">
<p><?php echo htmlentities($product_name); ?></p>
<h4><?php echo "₦".$product_price; ?><span></span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form id="addToCart" method="post">
<fieldset>
<input type="hidden" name="id" id="id" value="<?php echo htmlentities($product_id); ?>">
<input type="submit" id="add_to_cart" name="add_to_cart" value="Add to cart" class="button">
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
Here is my jQuery script:
$("#addToCart").submit(function(event){
event.preventDefault();
var page = $("#page").val();
var id = $("#id").val();
var cat_id = $("#cat_id").val();
var res_name = $("#res_name").val();
var add_to_cart = $("#add_to_cart").val();
$("#feedback").load("/web/cart.php", {
page:page,
id: id,
cat_id: cat_id,
res_name: res_name,
add_to_cart: add_to_cart
});
});
Change all your ids for classes in your PHP loop.
Then on click, look for the closest .column to find the relevant element.
$(".addToCart").submit(function(event){
event.preventDefault();
var column = $(this).closest(".column");
var page = column.find(".page").val();
var id = column.find(".id").val();
var cat_id = column.find(".cat_id").val();
var res_name = column.find(".res_name").val();
var add_to_cart = $(this).val();
$("#feedback").load("/web/cart.php", { // This element is outside the PHP loop and has a unique id.
page:page,
id: id,
cat_id: cat_id,
res_name: res_name,
add_to_cart: add_to_cart
});
});
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..
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.
I want to add an class to an closest element of an click object.
If you see code below, I would like to add an class to .process-signs-direction-cover-button
There is an loop, so the above classes get's repeated. But I want to add an classes to closest() .process-signs-direction-cover-button of where I click.
See picture
MY php:
<div class="col-md-6 reduced_padding_col7">
<?php
$signs_to_direction_and_cover_process = $mysqli_scs->query("SELECT * FROM agsigns_db3.stock_stk where idstc_stk = ".$row['idstc_stk']." AND directioncolor_stk = 'Yellow' ");
$row_cnt = $signs_to_direction_and_cover_process->num_rows;
if($row_cnt > 0){
while ($row = mysqli_fetch_assoc($signs_to_direction_and_cover_process)) { ?>
<div class="col-md-4 thumbnail"><img src="../../css/sign-directions/<?php echo $row['directionimage_stk']; ?>" class="processing-signs-direction-cover-sign-direction-selection-process" id="<?php echo $row['id_stk']; ?>" />
<div class="col-xs-12 text-center signs-text">
<span class="current_stock_figure">
<?php echo $row['stock_stk'] == "" ? "N/A" : $row['stock_stk']; ?>
</span>
<span class="max_stock_figure">
<?php echo $row['maxlevel_stk']; ?>
</span>
</div>
</div>
<?php
}
}
?>
</div>
<div class="col-md-2 process-button">
<img src="../../css/buttons/process-signs-covered-disabled.png" id="" class="process-signs-direction-cover-button disabled_button" rel="<?php echo $row['signcode_sgn']; ?>" alt="covered"/>
<div class="options-remember-checkbox">
<input type="checkbox" class="rememberoptions" name="rememberoption" value="checked" > Remember Options<br>
</div>
MY JQuery
$(".processing-signs-direction-cover-sign-direction-selection-process").click(function() {
$(this).closest("process-button.process-signs-direction-cover-button").toggleClass("process");
});
Modify
Question Modified
Image code
In your jquery part use addClass instead of toggleClass .
$(".processing-signs-direction-cover-sign-direction-selection-process").click(function() {
$(this).closest("process-button.process-signs-direction-cover-button").addClass("process");
});
I'm trying to get the id when I click different messages.
This is my javascript:
$(document).ready(function() {
$('#message-subject-result').click(function(){
var message = document.getElementById('message_id').value;
alert(message);
});
});
I am pulling it from a php function that is:
<div id="message-subject-result">
<div id="message-date">'.$date.'</div>
<input type="hidden" id="message_id" value="'.$row['mes_id'].'"><div id="message-sender-name">FROM: '.$row['firstname'].' '.$row['lastname'].'</div>
<div id="message-subject">SUBJECT: '.$row['subject'].'</div>
<div id="message-preview">'.$row['message'].'</div>
</div>
The javascript works but only when I click on the first echoed result. What am I doing wrong?
Replace duplicating ids with classnames and use find method:
$('.message-subject-result').click(function() {
var messageId = $(this).find('.message_id').val();
alert(messageId);
});
valid HTML should be:
<div class="message-subject-result">
<div clas="message-date">'.$date.'</div>
<input type="hidden" class="message_id" value="'.$row['mes_id'].'">
<div class="message-sender-name">FROM: '.$row['firstname'].' '.$row['lastname'].'</div>
<div class="message-subject">SUBJECT: '.$row['subject'].'</div>
<div class="message-preview">'.$row['message'].'</div>
</div>
You must have all unique ids. Something like this will give you unique id's:
<?php
$i = 0;
foreach($result as $row) { ?>
<div id="message-subject-result">
<div id="message-date">'.$date.'</div>
<input type="hidden" id="message_id<?php echo $i; ?>" value="'.$row['mes_id'].'"><div id="message-sender-name">FROM: '.$row['firstname'].' '.$row['lastname'].'</div>
<div id="message-subject">SUBJECT: '.$row['subject'].'</div>
<div id="message-preview">'.$row['message'].'</div>
</div>
<?php $i++;
} ?>