[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>
Related
i have this code to select some info from database to ul and open it in new window by id , the problem here is the same row open in the new window even i clicked in another title , i just want if user click in title will open new window with the info from the same row in database and if user click another title will open another window withe info from the same row :
<div class="col l6 offest-13">
<?php
$sql = "SELECT * FROM post";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_assoc($result)){
?>
<ul class="collection" >
<li class="collection-item" >
<h3><a id="a" value="submit" name="submit" href="" ><?php echo
$row['title'];?></a></h3>
<span class="grey-text">by <?php echo $row['author'];?> on <?php echo
$row['publish_date'];?></span>
<br>
<button class="button" id="submit" name="submit" value="submit"><span
class="s_text">GET COINS</span></button>
<div class="time-views">
<span class="time"><?php echo $row['type'];?>s<i class="material-
icons">access_time</i></span>
<span class="views"><?php echo $row['views'];?><i class="material-
icons">visibility</i></span>
</div>
</li>
</ul>
<script type="text/javascript">
$( "#a" ).click(function(){
window.open("createdb.php?id=<?php echo $row['id'];?>","ASDF") ;
});
</script>
<?php
}
}
?>
</div>
Since you are creating multiple items and assigning id="a" for all of them, it will always open first element, even if you click on second or third etc.
When you are looping through database, you can assign id of that row to link's id like this
`<h3><a id="<?php echo $row['id'];?>" value="submit" name="submit" href="" ><?php echo $row['title'];?></a></h3>`
And then add script
<script>
$( "#<?php echo $row['id']?>" ).click(function(){
window.open("createdb.php?id=<?php echo $row['id'];?>","ASDF") ;
});
<script>
but better way is to put script out of the loop
$('.collection .collection-item h1 a').click(function(){
window.open("createdb.php?id=" + this.id ,"ASDF") ;
});
You dont need to put your script within while loop. It seems that n number of events are created according to the length of the array.
Solution:-
Put your script out of the loop
Add data attribute in the anchor tag and put the id in it (<a data-id="<?php echo $row['id']?>").
Get the clicked elements id ( $(this).data("id") )
and pass createdb.php?id=$(this).data("id")
Use class for click event instead of id because id is unique for every event
<?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'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>
In my view i have a foreach loop like below
<?php foreach($wishes as $wish) { ?>
<input id="delete" type="button" value="<?= $wish->id ?>">
<?php } ?>
button value will be diffrent in each buttons
if I use a method like below it only take the first button click and its value other buttons do nothing
what did I do wrong
$(document).ready(function() {
$("#delete").click(function(event) {
event.preventDefault();
var id = $("#delete").val();
console.log('delete');
console.log(id);
});
});
Use classes instead of ids. Because an id has to be unique. Since your id values are dynamic you can listen to the button click event by using the button's class.
<?php foreach($wishes as $wish) { ?>
<input class="delete" type="button" value="<?= $wish->id ?>">
<?php } ?>
$(document).ready(function() {
$(".delete").click(function(event) {
event.preventDefault();
var id = $(this).val();
console.log(id);
});
});
<?php foreach($wishes as $wish) { ?>
<input class="delete" type="button" value="<?= $wish->id ?>">
<?php } ?>
Method 1
Use class instead of id for click event
$(document).ready(function() {
$(".delete").click(function() {
var IdValue = $(this).val();
alert(IdValue);
});
});
Method 2
Function can be call on button click onclick="function_name()" and pass the id as a parameter
<?php foreach($wishes as $wish) { ?>
<input class="delete" type="button" value="<?= $wish->id ?>" onclick="GetId(<?= $wish->id ?>)" >
<?php } ?>
function GetId(IdValue){
alert(IdValue)
}
add to your code class for events
<?php foreach($wishes as $wish) { ?>
<input id="<?= $wish->id ?>" class="action" type="button" >
<?php } ?>
$wish->id --> id must be uniq, and server must provide this
$(document).ready(function() {
$(".action").click(function(event) {
event.preventDefault();
var id = event.target.id;
console.log('delete');
console.log(id);
});
});
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.