jQuery add button attribute using closest method - javascript

Here is the button for adding items to cart
<div class="title_6">
<button class="btn my-cart-btn bt_cart btn-large btn-positive"
data-id="<?php echo $row['product_id'];?>"
data-name="<?php echo $row['product_name'];?>"
data-summary="<?php echo $row['pres_name'];?>"
data-price="<?php echo $row['sales_price'];?>"
data-quantity="1"
data-image="admin/upload/<?php echo $row['photo_1'];?>"
>Add to Cart</button>
</div>
I'm trying to set data-quantity attribute of button using jQuery. As there are multiple items I'm using closest method. What I've tried-
$(this).closest('.title_6').find('button').attr("data-quantity", qty);
But its not working. How to do that properly ?
Update:
Here is the code for (+) button. What is tying to do, When (+) button .bt_3 is clicked I'll add attribute to another button "Add Cart"
$(document).ready(function() {
$('.product_row').on('click', '.bt_3', function() {
var qty = $(this).closest('.title_5').find('input').val();
var qty_add = Number(qty)+Number(1);
$(this).closest('.title_5').find('input').val(qty_add);
$(this).closest('.title_6').find('button').attr("data-quantity", qty_add);
});
});
HTML for (+) & (-) button along with Add Cart Button for better understanding
<div class="title_5">
<button class="btn bt_1 btn-large btn-negative">-</button>
<input type="text" class="bt_2" value="1">
<button class="btn bt_3 btn-large btn-primary">+</button>
</div>
<div class="title_6">
<button class="btn my-cart-btn bt_cart btn-large btn-positive" data-id="<?php echo $row['product_id'];?>" data-name="<?php echo $row['product_name'];?>" data-summary="<?php echo $row['pres_name'];?>" data-price="<?php echo $row['sales_price'];?>" data-quantity="1" data-image="admin/upload/<?php echo $row['photo_1'];?>" >Add to Cart</button>
</div>

Try changing this line:
$(this).closest('.title_6').find('button').attr("data-quantity", qty_add);
for this one:
$(this).parent().next('.title_6').find('button').attr("data-quantity", qty_add);

Related

selecting radio inside button

I want the button to have radios inside and after selecting a given one, radios in the middle would also be marked. (clicking the button selects radios inside)
Code:
<div class="col-sm-3">
<button class="btn btn-light" style="width:100%;"><?php echo $tdate; ?></button>
<?php
$json = file_get_contents('http://localhost:8000/api/open/freeterms/CXUgBAeYu2d4oRgIAck0Ch61WzBX6C/2020-10-24');
$obj = json_decode($json);
$i=0;
foreach($obj as $o){
if($i==0){
}else{
if($o->type=="free"){
echo '<button type="button" class="btn btn-info" style="width:30%; margin-bottom:10px; margin-right:3%;"><input type="radio" name="date" value="'.$tdate.'"/><input type="radio" name="start" value="'.$o->start.'"/><input type="radio" name="end" value="'.$o->end.'"/>'.$o->start.' - '.$o->end.'</input>';
}
}
$i++;
}
?>
</div>
Accessibility wise, adding interactive elements inside another (in your case: input:radio inside button) is considered a really bad practice and is generally too difficult to implement correctly. You should find another UI layout that would make this acceptable accessibility wise.

Get the id on modal when click on anchor tag for open modal using php

I have a modal open on click anchor tag and passing the id value in input hidden field using javascript and value is show in this hidden field
<a href="#modal2" data-toggle="modal" data-id="<?php echo $CRow['id'];?>"
id="<?php echo $CRow['id'];?>" class="btn-floating
waves-effect waves-light yellow modal-trigger" title="Test"></a>
<div id="modal2" class="modal">
<form action="lst_applicant.php" method="post" enctype="multipart/form-data">
<div class="modal-content">
<input type="hidden" id="applicantid" name="applicantid" value="" />
<p>Applicant Information</p>
<?php
$applicant_detail=mysql_query("select * from tbl_useraccount where id=".$applicantid);
?>
</div>
<div class="modal-footer">
<button type="submit" name='save' class="btn waves-effect waves-light right modal-close">Save</button>
</div>
</form>
</div>
Here is the code of javascript passing the id value in input hidden field
<script>
$(document).on("click", ".modal-trigger", function () {
var myBookId = $(this).data('id');
$(".modal-content #applicantid").val( myBookId );
});
</script>
Issue is that when I get id in hidden field but cannot get in php variable. how to get id on modal when opening a modal?
When I click on anchor tag for open a modal then on modal there is one input hidden field, in this hidden field show a id value of each anchor tag using javascript, I want that when this hidden field get id value so how to get in php variable? I am getting in php variable but it is not working
You can achieve data like this, you just have to provide the details in the anchor modal data
data-id="<?php echo $CRow['id'];?>" and for name data-name="<?php echo $CRow['name'];?>" and so on
$(document).on("click", ".modal-trigger", function () {
var myBookId = $(this).data('id');
var name = $(this).data('name');
var email = $(this).data('email');
$(".modal-content #applicantid").val( myBookId );
$("#appli_name").val(name);
$("#appli_email").val(email);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Click
<div id="modal2" class="modal">
<form>
<div class="modal-content">
<input type="text" id="applicantid" name="applicantid" value="" />
<p>Applicant Information</p>
<input type="text" id="appli_name"><br>
<input type="text" id="appli_email">
</div>
<div class="modal-footer">
<button type="submit" name='save' class="btn waves-effect waves-light right modal-close">Save</button>
</div>
</form>
</div>
You don't have to get details of that data only inside the modal, you can achieve everything before anchor-tag passing, like how you get id. And you can pass along the details of that data inside the modal
Example: data-name="<?php echo $CRow['name']; ?>" and in your javascript var name=$(this).data('name');

onclick location href not working with php variable

I have a button with a link that involves a PHP variable, but when the button is clicked, nothing happens and I am not brought to a new page according to the link. I tested the link with a <a> tag instead of a <button> tag, and the link works. I am new to PHP so any suggestions are appreciated.
Here is the code:
<?php
echo
'<button type="button" class="btn btn-secondary" id="btn" style="margin-left:0%;color:gray" onclick="location.href="' . $child_page . '"">
KEEP READING <span class="glyphicon glyphicon-chevron-right" style="color:gray"></span>
</button>';
echo 'Link ';
?>
The variable can look like: /n/2/ar/ and will apply like this: www.example.com/n/2/ar/. Please note that the inline CSS is only for testing purposes.
You have a problem with the quotes
Try this:
<?php
$x = 'http://test.com';
$y = 'location.href="'.$x.'"';
echo
'<button type="button" class="btn btn-secondary"
id="btn"
style="margin-left:0%;color:gray"
onclick='.$y.'>
KEEP READING
<span class="glyphicon glyphicon-chevron-right" style="color:gray"></span>
</button>';
?>
There is a problem with the quotes..Nothing else
Use this:
echo
'<button type="button" class="btn btn-secondary" id="btn" style="margin-left:0%;color:gray" onclick=location.href="'.$child_page.'">
KEEP READING <span class="glyphicon glyphicon-chevron-right" style="color:gray"></span>
</button>';
It looks like you have a problem with your opening tag. The code
$child_page = '/n/2/ar/';
echo '<button ... onclick="location.href="' . $child_page . '"">';
renders to
<button ... onclick="location.href="/n/2/ar/"">
which is understood by browser as
<button ... onclick="location.href=" /n/2/ar/ "">
So the location is being empty.
Try wrapping url into single quotes instead:
$child_page = '/n/2/ar/';
echo '<button ... onclick="location.href=\'' . $child_page . '\'">';
If you begin with double-quotes instead of single-quotes, it can be done this way:
$child_page = 'this.html';
echo "<button type='button' class='btn btn-secondary' id='btn' style='margin-left:0%;color:gray' onclick=\"location.href='$child_page'\">
KEEP READING <span class='glyphicon glyphicon-chevron-right' style='color:gray'></span>
</button>";
echo "<a href='$child_page'>Link </a>";
Double-quotes allow you to place a variable 'as-is' whereas with single-quotes you'll have to do a couple extra steps.
Try this
<?php
$child_page = 'https://www.google.com';
echo '<button type="button" class="btn btn-secondary" id="btn" style="margin-left:0%;color:gray" onclick="location.href=\'' . $child_page . '\'">
KEEP READING <span class="glyphicon glyphicon-chevron-right" style="color:gray"></span>
</button>';
echo "<a href='$child_page'>Link </a>";
?>

How to add phone numbers from database to <a href="tel:"> tag

<button type="button" class="btn" id="CallBtn"> CALL</button>
I need to add phone numbers from database to the anchor tag above.
How do I do that?
Edit from Comment:
$sql_m="select * FROM b2b_mec_tbl where b2b_shop_id=$b2b_shop_id"; // tracking table $sql_mec=mysqli_query($con,$sql_m) or die(mysqli_error());
$row_mec=mysqli_fetch_array($sql_mec);
$b2b_mec_num=$row_mec['b2b_mobile_number_1'];
You were close here is how I would do it.
<?php
$con='DBCONNECT STRING HERE';
$sql_m="select * FROM b2b where b2b_id = '$b2b_id'";
$sql_mec=mysqli_query($con,$sql_m) or die(mysqli_error());
while($row_mec=mysqli_fetch_array($sql_mec)){
$b2b_mec_num=$row_mec['b2b_mobile'];
}
?>
<a href="tel:<? echo $b2b_mec_num; ?>">
<button type="button" class="btn" id="CallBtn">
CALL
</button>
</a>

jquery show/hide with php for label/input text

Using php/jquery I'm listing out rows data from mysql db using php while loop
When I click on edit button on particular record the label is replaced with input text!! and label value is passed to input text but it showing up only in first row record I'm unable to replace particular row record from label to input.
I'm using 4 links button for edit/delete/save/cancel
when i click on edit button edit/delete button will change to save/cancel and vice versa.
Any help is appricated thanks!!
jquery code
$('body').delegate('.edit', 'click', function() {
$('#feed_label').hide();
$('#url1').show();
});
$('body').delegate('.cancel', 'click', function() {
$('#feed_label').show();
$('#url1').hide();
});
html/php code
<div>
<label style="display:block-inline;" class="feed_label" id="feed_label" idl='<?php echo $row->id;?>'>
<?php echo $row->url; ?>
</label>
<input name="url1" class="form-control url1" value="<?php echo $row->id;?>" id="url1" type="text" placeholder="http://feeds.com/" style="display:none;">
</div>
<div>
<a ide='<?php echo $row->id;?>' id="edit" class='edit' href="#" style="display:block-inline;">EDIT</a>
<a idu='<?php echo $row->id;?>' id="update" class='update btn btn-primary btn-sm' href='#' style='display:none;'>SAVE</a>
<a idd='<?php echo $row->id;?>' id="delete" class='delete' href="#" style="display:block-inline;">DELETE</a>
<a idc='<?php echo $row->id;?>' id="cancel" class='cancel btn btn-warning btn-sm' href='#' style='display:none;'>CANCEL</a>
</div>

Categories

Resources