<?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 } ?>
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 :)
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 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 javascript which currently gets called using the 'onchange' event.
<SELECT NAME="person<?PHP echo $i; ?>" id="person<?PHP echo $i; ?>" onchange="get(<? echo $i; ?>);">
This select input replies on me having chosen a selection from the drop down list. if the page is loaded and the select has a 'selected' attribute so that a selection is preloaded, the javascript is not called. How can I change this so that the script will be called on load for the existing selection and on change should the user change the option?
this does not work:
<SELECT NAME="person<?PHP echo $i; ?>" id="person<?PHP echo $i; ?>" onchange="get(<? echo $i; ?>);" onload="get(<? echo $i; ?>);">
Thanks for the help.
<SELECT NAME="person<?PHP echo $i; ?>" id="person<?PHP echo $i; ?>" onchange="get(<? echo $i; ?>);">
select does not have onload event. you can call onload function on body tag,
<body onload="get(<? echo $i; ?>);">
But for this function to work $i should be defined before body tag ,otherwise it will return a undefined error.
Its not working because SELECT doesnot have onload event. Use it in windows onload instead. BTW where $i comes from
<script>
window.onload=function(){
get(<? echo $i; ?>);
}
</script>
I would have used jQuery
jQuery(document).ready(function($) {
$('select').each(function() {
$(this).change(function(){
myFunction();
});
});
myFunction();
});