I'm trying to get the id from a div tag and to console.log it but i get undefined.
Any ideas why is that happened?
<?php $id = get_the_ID(); ?>
<div class="about-cont" id="<?php echo $id ?>"></div>
<script>
jQuery('.about-cont').click(function(el){
console.log(jQuery(el.target).attr('id'));
});
</script>
Try with this.
<script>
jQuery('.about-cont').click(function(){
console.log(jQuery(this).attr('id'));
});
</script>
You can use event argument to easily find the clicked target. Also, you can prevent all the events related to that action by using event.preventDefault(); in the function block.
<script type='text/javascript'>
jQuery('.about-cont').click(function(event){
console.log(jQuery(event.currentTarget).attr('id'));
//or
console.log(jQuery(event.target).attr('id'));
});
</script>
You can Do like this, (this.id) is fetch current element id.
<?php $id = 1; ?>
<div class="about-cont" id="<?php echo $id ?>">click</div>
<script>
jQuery('.about-cont').click(function(el){
console.log(this.id);
});
</script>
Related
i have div with id like this
<div id='alert<?php echo $row['no']?>'>
<b style='font-size:12px; color: red'>*DUPLICATE ID CUSTOMER</b>
</div>
and i need to call that id in javascript,
i try like this but the value not right
$("#alert<?php echo $row['no'] ?>").hide();
how to fix it
thankyou
You need to include jQuery CDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$("#alert<?php echo $row['no'] ?>").hide();
</script>
I'm assuming that you have something like this:
foreach($result as $row){
?>
<div id='alert<?php echo $row['no']?>'>
<b style='font-size:12px; color: red'>*DUPLICATE ID CUSTOMER</b>
</div>
<script>$("#alert<?php echo $row['no'] ?>").hide();</script>
<?php
}
Otherwise if the script-tag is outside the loop then it wount work.
Another solution would be to make a function let say hideAlert(div)
and do something like this:
<?php
foreach($result as $row){
?>
<div onload="hideAlert(this)">
<b style='font-size:12px; color: red'>*DUPLICATE ID CUSTOMER</b>
</div>
<?php
}
?>
<script>
function hideAlert(div){
div.hide();
}
</script>
if you need the id to reference to it later you could just change the code like this:
foreach($result as $row){
?>
<div onload="hideAlert(<?php echo $row['no']; ?>)">
<b style='font-size:12px; color: red'>*DUPLICATE ID CUSTOMER</b>
</div>
<?php
}
?>
<script>
function hideAlert(id){
$(`#alert${id}`).hide();
}
</script>
Keep in mind that I'm not an expert on jQuery soo I'm not really sure if this works but i hope it helps :)
<?php
for($i=0;$i<5;$i++){
?>
<button id="text<?php echo $i; ?>">hello </button>
<script>
var i=<?php echo $i; ?>;
$(document).ready(function(){
$("#text"+i).click(function(){
alert("hello");
})
})
</script>
<?php } ?>
If I have a varying id like this and I want to call it in jQuery using this code its give me no result. Where is the problem? How can I call an element like this button?
Would be better to move the script out of the loop, get the buttons all at once and then bind the click event:
// Create all buttons, with class "text-button"
<?php for($i=0;$i<5;$i++): ?>
<button class="text-button" id="text<?php echo $i; ?>">hello </button>
<?php endif; ?>
<script>
// On document ready
$(document).ready(function() {
// Find all buttons with class "text-button"
$(".text-button").click(function(e) {
alert("hello");
// Log the clicked button
console.log(e.currentTarget);
console.log(e.currentTarget.id);
})
})
</script>
I am satisfied with #Emre's answer. And also remove $(doucment).ready() will solve your problem. Like this.
<?php
for($i=0;$i<5;$i++){
?>
<button id="text<?php echo $i; ?>">hello </button>
<script>
var i=<?php echo $i; ?>;
$("#text"+i).click(function(){
alert("hello");
});
</script>
<?php } ?>
[i am using this loop to select existing data from database table and assigning them to html element. it works fine but I have no idea how to select its ID when the button is clicked.
I tried using document.GetElementByID but cannot choose particular ID when the button is clicked. Any suggestions on how to get the ID Of that button when it is clicked using javascript?
<?php
include "connect.php";
$stmnt = "select * from tbl_category";
$run = $con->query($stmnt);
$num=$run->num_rows;
if($num>0)
{
while($data = $run->fetch_array()){
$btn1 = $data['id'];
echo $btn1;
?>
<button id="<?php $btn1;?>" class="btn"><?php echo $data['category']; ?>
</button>
<?php
}
}
?>`
You can do like this:
$( "button" ).click(function() {
$( this ).attr("id");
});
Or alternatively you can also use prop() method:
$( "button" ).click(function() {
$( this ).prop("id");
});
for documentation you can reff:
https://api.jquery.com/attr/
https://api.jquery.com/prop/
Use javascript function:
<button id="<?php $btn1;?>" class="btn" onclick="javascript:get_buttonid(this);"><?php echo $data['category']; ?>
</button>
<script>
function get_buttonid(ths){
alert(ths.id);
}
</script>
I want to ask for help because I have a problem creating buttons using a for and put in the onclick the name of a function with a parameter, but this parameter is a string, I get an array and end of the cycle all buttons have the name of the last element of the array rather than each position of the array .. Thanks in advance for your help ..
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function enviar(periodo){
alert(periodo);
}
</script>
</head>
<body>
<?php
$formatos=
array(array('idPeriodo'=>'pp2019'),
array('idPeriodo'=>'pp2018'),
array('idPeriodo'=>'pp2017'),
array('idPeriodo'=>'pp2016'));
for($l=0; $l< count($formatos); $l++){
?>
<button onclick="enviar(<?php echo json_encode($formatos[$l]['idPeriodo'])?>)">Guardar</button>
<?php
}
?>
</body>
</html>
You already have a PHP loop, so the javascript bit is useless.
Try this:
<?php
for($l=0; $l< count($formatos); $l++){
$per = json_encode($formatos[$l]['idPeriodo']);
?>
<button onclick="enviar('<?= $per ?>')">Guardar</button>
<?
}
?>
Is there any reason you want it json_encode? this works. Try this :
EDIT
<?php
$formatos=
array(array('idPeriodo'=>'pp2019'),
array('idPeriodo'=>'pp2018'),
array('idPeriodo'=>'pp2017'),
array('idPeriodo'=>'pp2016'));
for($l=0; $l< count($formatos); $l++){
$periodo = $formatos[$l]['idPeriodo'];
?>
<button onclick="enviar('<?php echo $periodo; ?>')">Guardar</button>
<?php
}
?>
You get the last element of the array because you redefine per variable every time. Use this code:
<?php
$formatos=
array(array('idPeriodo'=>'pp2019'),
array('idPeriodo'=>'pp2018'),
array('idPeriodo'=>'pp2017'),
array('idPeriodo'=>'pp2016'));
for($l=0; $l< count($formatos); $l++){
$param = json_encode($formatos[$l]['idPeriodo']);
$param = addslashes($param);
?>
<button onclick="enviar(<?php echo $param; ?>)">Guardar</button>
<?php
}
?>
Try this script and hope this will work :
<?php
$formatos = array(
array('idPeriodo'=>'pp2019'),
array('idPeriodo'=>'pp2018'),
array('idPeriodo'=>'pp2017'),
array('idPeriodo'=>'pp2016')
);
for($l = 0; $l < count($formatos); $l++) {
?>
<button onclick='enviar(<?php echo json_encode($formatos[$l]['idPeriodo']);?>)'>Guardar</button>
<?php } ?>
I have a project in which I am displaying a button tag in a while loop. On every button click I want to display an alert box with the respective UserId. Here is my code:
<?php
$data = mysql_query("Select RegisterId,FName,Image1 from Information where RegisterID='$profileMonth1'") or die(mysql_error());
while ($dis1 = mysql_fetch_array($data)) {
?>
<div id="demo1" value="<?php echo "$RegisterId" ?>">
<button onClick="validate()">Show Interest</button>
</div>
<?php } ?>
Here is my validate function:
function validate1(id2)
{
// var id2;
id2 = document.getElementById('demo2').getAttribute('value');
alert(id2);
}
But it is always showing me last user id .. whereas i want to display userid for every user on everyclick.
Can someone help?
Here man, the function you were calling was undefined validate1, also you don't need to get any arguments on your function declaration, since you are not passing any arguments when you invoke it.
<?php
$data = mysql_query("Select RegisterId,FName,Image1 from Information where RegisterID='$profileMonth1'") or die(mysql_error());
while ($dis1 = mysql_fetch_array($data)) {
?>
<div id="demo" value="<?php echo "$RegisterId" ?>">
<button onClick="validate()">Show Interest</button>
</div>
JS
function validate(){
var id2 = document.getElementById('demo').getAttribute('value');
alert(id2);
}
try this in your code
HTML:
<button onClick="validate('<?php echo $RegisterId; ?>')">Show Interest</button>
Javascript:
function validate(id2)
{
alert(id2);
}
Your code needs some modifications.
Firstly, you have made a provision to send id to javascript function, but, you are not passing id to it.
PHP
<?php
$data = mysql_query("Select RegisterId,FName,Image1 from Information where RegisterID='$profileMonth1'") or die(mysql_error());
while ($dis1 = mysql_fetch_array($data)) {
?>
<div id="demo1" value="<?php echo $dis1['RegisterId'];?>">
<button onClick="validate('<?php echo $dis1['RegisterId'];?>')">Show Interest</button>
</div>
<?php } ?>
Javascript:
function validate1(id2) {
// var id2;
//id2 = document.getElementById('demo2').getAttribute('value');
alert(id2);
}
With this code, your clicks shouldn't even return the last id. Your javascript function is not looking good.
This should work;
<?php
$data = mysql_query("Select RegisterId,FName,Image1 from Information where RegisterID='$profileMonth1'") or die(mysql_error());
while ($dis1 = mysql_fetch_array($data)) {
?>
<!-- removed id attribute, as they're unique, you can't set it to every div.
If you really need id attribute, you can set one by using your RegisterId (e.g. id="demo-<?php echo $RegisterId; ?>)
And moved value attribute to button tag, it's much more useful in it. -->
<div>
<button onClick="validate(this)" value="<?php echo "$RegisterId" ?>">Show Interest</button>
</div>
<?php } ?>
Javascript
function validate(element){
alert(element.value)
}
This way, you can use it in other stuff much easier.