jquery show/hide with php for label/input text - javascript

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>

Related

jQuery add button attribute using closest method

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);

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');

when there are two buttons how to show error message if user tries to click button2 before clicking button1- Javascript or html

I have created a user profile information update using php. To update his image, what I do is that first let him delete the image and ask him to upload a new image. If accidentally user click image update button without clicking image delete button how to show an error message as "please first delete your Image and then upload a new image".
I couldn't find any way of doing it.
A help would be really appreciated
Given below is my code
<div class="form-group">
<center><label>Update A New Profile Picture </label></br></center>
<form method="post" action="update_userinfo.php" enctype="multipart/form-data">
<center><img id="uploadPreview4" style="width: 100px; height: 100px;" /></center>
<center><input type="file" name="Filename4" id="uploadImage4" onchange="PreviewImage4();" class="form-group"><input TYPE="submit" name="updateImage" value="Update Image" class="btn btn-success" /></center>
</form>
</div>
<div class="col-md-6">
<center><label>Your Current Profile Picture </label></br>
<form method="post" action="update_userinfo.php" enctype="multipart/form-data" onSubmit="if(!confirm('Do You really want to update your profile picture?')){return false;}">
<?php
echo "<img border=\"0\" src=\"".$row['image_path4']."\" width=\"100\" height=\"100\" >";
echo "<br>"; ?>
<input TYPE="submit" name="delete" value="delete" class="btn btn-success" />
</form>
</div>
This is what i can think of if you really want to deal with this using PHP ,
considering this is your current code
<div class="form-group">
<center><label>Update A New Profile Picture </label></br></center>
<form method="post" action="update_userinfo.php" enctype="multipart/form-data">
<center><img id="uploadPreview4" style="width: 100px; height: 100px;" /></center>
<center><input type="file" name="Filename4" id="uploadImage4" onchange="PreviewImage4();" class="form-group"><input TYPE="submit" name="updateImage" value="Update Image" class="btn btn-success" /></center>
</form>
////
new code
<?php if(isset($photoDeleted) && $photoDelete=== false) :>
<center>Hey! Delete your photo first!</center>
<?php endif; ?>
////
</div>
<div class="col-md-6">
<center><label>Your Current Profile Picture </label></br>
<form method="post" action="update_userinfo.php" enctype="multipart/form-data" onSubmit="if(!confirm('Do You really want to update your profile picture?')){return false;}">
<?php
echo "<img border=\"0\" src=\"".$row['image_path4']."\" width=\"100\" height=\"100\" >";
echo "<br>"; ?>
<input TYPE="submit" name="delete" value="delete" class="btn btn-success" />
</form>
</div>
from your PHP side, check, if there is still a photo in db reload this upload page and pass photoDelete variable as false when it's loading the page php will render this as an error.
But! Wait!
Why don't you just replace/delete the previous photo with the newly updated one in your php?
assuming that there's only one record of profile photo for each user, just update your db record with the newly updated photo and delete the previous record !?
it's a better User Experience overall

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>

Update text field from popup

I have a form like this:
<form action='index.php' method='POST' id='sampleform' name='sampleform'>
<input type=text name=image size=20 value=''>
</form>
And I want to populate the image field from a popup window.
I'm trying to do it with this:
<a href="#" onclick="window.opener.document
.getElementById('image').value='<? echo $id;?>';window.close();">
<? echo $id;?>
</a>
But it doesn't work.
Solution1;
//Add child window
function ElementUpdater(elemId,param1) {
document.getElementById(elemId).value = param1;
}
//Use parent window
window.opener.document.ElementUpdater("image1", "image.png");
you have to change it like:
<a href="#" onclick="window.opener.document
.querySelector('input[name=image]').value='<? echo $id;?>';window.close();">
<? echo $id;?>
</a>
if I were you I would do it like:
<a href="javascript:window.opener.document
.querySelector('input[name=image]').value='<? echo $id;?>';window.close();">
<? echo $id;?>
</a>
Try set id to text field:
<input type="text" name="image" id="image" size="20" value="">

Categories

Resources