Get id from multiple checkbox when clicked - javascript

I want to get current id on click.and checked only one checkbox. Here are my input boxes
<table style="width: 500px; border: 1px solid BLACK;">
<?php for($i=1; $i<10; $i++){ ?>
<tr><td><input type="checkbox" name="myCheckboxes[]" class="chkTag" id="chkBox<?php echo $i; ?>" /></td>
<td><input type="checkbox" name="myTagCheckboxes[]" class="chkTag" id="chkBox<?php echo $i; ?>" value=""/></td>
<td><?php echo $i;?></td></tr>
<?php }?>
</table>
Here is my jQuery
$(document).ready(function(e){
$('input#chkBox1').on('change', function() {
$('input#chkBox1').not(this).prop('checked', false);
});
});
its work for first one. I didn't get the other id on click.

$(document).ready(function(e){
$('input').on('click', function(e){
var id = e.target.id;
$('input#'+id).on('change', function() {
$('input#'+id).not(this).prop('checked', false);
});
});
});
FIDDLE HERE
http://jsfiddle.net/spydo9s3/

The code you have there is targeting one checkbox (ID: chkBox1). Your PHP is ID'ing them dynamically, so chkBox1, chkBox2 etc.
Perhaps what you want is a more dynamic click listener, such as:
$(document).ready(function(e)
{
$('input.chkTag').on('change', function()
{
$('input.chkTag').not(this).prop('checked', false);
});
});
This would target the class that each input shares instead.

IDs must be unique! You must change in your PHP so that each input gets a unique ID not same as any else.
Something like:
<?php for($i=1; $i<10; $i++){ ?>
<tr><td><input type="checkbox" name="myCheckboxes[]" class="chkTag" id="chkBox_0_<?php echo $i; ?>" /></td>
<td><input type="checkbox" name="myTagCheckboxes[]" class="chkTag" id="chkBox_1_<?php echo $i; ?>" value=""/></td>
<td><?php echo $i;?></td></tr>
<?php }?>
And in the jQuery you need not more than:
$('input.chkTag').on('change', function(){
var id = this.id;
// do something with id
});
If you just want one of them checked at time then you need not type="checkbox" but type="radio"

Related

How to use PHP loop variable in javascript?

I have run an SQL statement to get all the records I need to show in a HTML table.
I have then run a while loop to display the records from the database. (The code for this is below.)
<table class="projects-table">
<tr>
<th>Complete?</th>
<th>Paid?</th>
<th>Project Name</th>
<th>£ / hr</th>
<th>End Date</th>
<th>Hours Logged</th>
<th><i class="fa fa-trash"></i></th>
</tr>
<?php
$select_id_jobs = mysqli_query($mysqli, "SELECT id FROM users WHERE username='$login_user'");
while($row = mysqli_fetch_array($select_id_jobs)) {
$id_jobs = $row['id'];
}
$select_jobs_with_usrid = mysqli_query($mysqli, "SELECT * FROM jobs WHERE username_id = '$id_jobs';");
while($row = mysqli_fetch_array($select_jobs_with_usrid)) {
?>
<tr id="<?php echo $rowId; ?>">
<td>
<!-- Complete Checkbox -->
<input type="checkbox" id="<?php echo $completeCheck;?>" onclick="compTask();">
</td>
<td>
<!-- Paid checkbox -->
<input type="checkbox" onclick="paidTask()">
</td>
<td>
<?php echo $row['project_title']; ?>
</td>
<td>
<?php echo $row['cost_hour']; ?>
</td>
<td>
<?php echo $row['completion_date']; ?>
</td>
<td>
<?php echo $row['time_spent']; ?>
</td>
<td>
<div class="delete-btn"><a onclick="deleteTask()">DELETE</a></div>
</td>
</tr>
<?php } ?>
</table>
As you can see from the checkbox for completing a task. What I want to do is use javascript so that when the checkbox is checked the text from the other records turns green.
I have included the javascript I am trying to use below. I don't know why but I can't access the inputs ID in order to change the css.
<script>
function compTask() {
if (document.getElementById("<?php echo 'complete-' . $row['id'] ?>").checked == true) {
document.getElementById("<?php echo 'tr' . $row['id']; ?>").style.color = "green";
alert("hello");
} else {
document.getElementById("<?php echo 'tr' . $row['id']; ?>").style.color = "black";
}
}
Okay easy way to do that is to print id as parameter in js function
something like that:
<input type="checkbox" id="<?php echo $completeCheck;?>"
onclick="compTask( '<?php echo $row['id'];?>' );">
and in js function deal with id from parameter:
function compTask(id) {
if (document.getElementById('complete-' + id).checked == true) {
document.getElementById('tr' + id).style.color = "green";
alert("hello");
}
}
Hy,
You need to add id in onclick="deleteTask('<?php echo $row['id']; ?>')">
Now in you function have id:
function deleteTask(id) { console.log(id) }

how to use hide show in while loop with different ids

HTML
while($row=mysql_fetch_array($result_pag_data)) {
$ad++;
$sql1=mysql_query("select *from company where com_id='$row[com_id]'");
$row1=mysql_fetch_array($sql1);
?>
<tr>
<input type="hidden" id="comid" name="comid" value="<?php echo $row1[com_id];?>"/>
<tr>
<td><img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile"></td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details"><?php if($row1['mobile1']!='') { ?> <a id="showmobile<?php echo $row1[com_id];?>">View Mobile Number</a> <span id="shwmb<?php echo $row1[com_id];?>" style="display:none"><?php echo $row1['mobile1'];}else{ echo 'Not Available';}?></td>
</tr>
}
Javascript
<script>
$(function () {
var comid = $('#comid').val();
$("#showmobile" + comid).click(function() {
$("#shwmb" + comid).show();
$("#shwmb" + comid).hide();
});
});
</script>
Now I want to show the mobile number when the customer clicks on View Mobile Number. It currently only works on the first viewed company, not for subsequent companies.
When I change the event handling to listen to the class instead of the id, clicking on any one company's View Mobile Number will display the mobile numbers of all companies on the page.
Neither solution is working properly. What am I doing wrong, and how do I make this work?
Change your code as like below:
<?php
$ad = 0;
while ($row = mysql_fetch_array($result_pag_data)) {
$ad++;
$sql1 = mysql_query("select *from company where com_id='$row[com_id]'");
$row1 = mysql_fetch_array($sql1);
?>
<tr>
<input type="hidden" id="comid" name="comid" value="<?php echo $row1[com_id]; ?>"/>
<tr>
<td><img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile"></td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details">
<?php if ($row1['mobile1'] != '') { ?>
<a id="showmobile<?php echo $row1[com_id]; ?>" onclick="return showmobile(<?php echo $row1[com_id]; ?>)">View Mobile Number</a>
<span id="shwmb<?php echo $row1[com_id]; ?>" style="display:none">
<?php echo $row1['mobile1']; ?>
</span>
<?php
} else {
echo 'Not Available';
}
?>
</td>
</tr>
<?php }
?>
<script>
function showmobile(id) {
if($("#shwmb" + id).css('display') == 'none') {
$("#shwmb" + id).show();
}else {
$("#shwmb" + id).hide();
}
}
</script>
You have to put unique value in the ID or CLASS of the line.
<input type="hidden" id="comid<?php echo $row['ID']?>" name="comid" value="<?php echo $row1[com_id];?>"/>
and after that in the javascript code you just specify the id along with the id_name and id_value.
This might work for your purpose:
while($row=mysql_fetch_array($result_page_data)) {
$ad++;
$sql1=mysql_query("select *from company where com_id='$row[com_id]'");
$row1=mysql_fetch_array($sql1);
?>
<tr>
<td>
<input type="hidden" id="input-<?php echo $row1[com_id];?>" name="input-<?php echo $row1[com_id];?>" value="<?php echo $row1[com_id];?>"/>
<img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile">
</td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details"><?php if($row1['mobile1']!='') { ?> <a id="showmobile<?php echo $row1[com_id];?>" class="showmobile">View Mobile Number</a> <span id="shwmb<?php echo $row1[com_id];?>" style="display:none"><?php echo $row1['mobile1'];}else{ echo 'Not Available';}?></td>
</tr>
}
<script>
$(function () {
$(".showmobile").click(function() {
var comid = $(this).attr("id").replace("showmobile","");
$("#shwmb" + comid).toggle();
});
});
</script>
The first change is to use $row1[com_id] in the id and name attributes for the hidden input field. This will allow the hidden fields to be separate from one another, as id has to be unique on a page; name should also be unique.
Next, a class was added to the showmobile link, so that we can install a single class-level click handler. The click handler will extract the com_id from the showmobile element and use it to change the visibility of the shwmb element, using jQuery toggle.
Some light restructuring has been done and some significant reformatting. The hidden input field was added to the first td element, so that it doesn't interfere with the structure of the table.
Also, the $result_page_data variable name was corrected.

php & js - add emails to input text

I am trying to send each member email generate from the php if condition to an input text. The selection works well however, the problem I have is to find a way if multiple checkboxes are selected the emails sums spacing them with a coma.
Right now what I have is that if I check multiple checkboxes the last email selected replaces the old one.
Any Idea how Could I do this? Also if just one email is selected no coma have to be added and if the checkbox is unchecked the email is removed.
<?php if ( bp_has_members( "search_terms={$_POST['category']}")) : ?>
<?php while ( bp_members() ) : bp_the_member(); ?>
<table border="1" >
<tr>
<td style="width:30px;">
<input class="select_email" type="checkbox" name="get_email" value="<?php bp_member_user_email('type=user_email') ?>"/>
</td>
<td>
<?php bp_member_user_email('type=user_email') ?>
</td>
</tr>
</table>
<?php endwhile; ?>
<?php endif; ?>
Jquery
$(document).ready(function(){
$(".select_email").click(function(){
var select_check = $(this);
var select_email = $(this).parent().find(".select_email").val();
//var sum_email = select_email + ", " + select_email;
if ( select_check.is(':checked') ) {
// Do stuff
alert(select_email + " added");
$("#my_email_to_id").val(sum_email);
}else {
alert(select_email + " removed");
}
});
});
<?php if ( bp_has_members( "search_terms={$_POST['category']}")) : ?>
<?php while ( bp_members() ) : bp_the_member(); ?>
<table border="1" >
<tr>
<td style="width:30px;">
<input class="select_email" type="checkbox" name="get_email[]" value="<?php bp_member_user_email('type=user_email') ?>"/>
</td>
<td>
<?php bp_member_user_email('type=user_email') ?>
</td>
</tr>
</table>
<?php endwhile; ?>
<?php endif; ?>
Jquery
$(document).ready(function(){
$(".select_email").click(function(){
var val = $(':checkbox:checked').map(function(){ return this.value; }).toArray().join(', ');
alert(val);
$("#my_email_to_id").val(sum_email);
});
});

single id alerting same time in a while loop

I am having a table from where i am fetching activities and displaying in a table ...like this
<table width="1000px;" style="border:0px;" >
<tr>
<?php
$sql_activities="select * from tb_activities";
$query_activities=mysql_query($sql_activities);
while($row_activities=mysql_fetch_array($query_activities))
{
?>
<td width="50">
<input type="radio" value="<?php echo $row_activities['activity_name']; ?>" name="activities" onclick="hi() " id="activities" /><?php echo " ".$row_activities["activity_name"]; ?></td>
<?php
}
?>
</tr>
</table>
Now i have applied it in an onlick event of a radio button and the script for the function is:
<script type="text/javascript">
function hi()
{
a = document.getElementById("activities").value;
alert(a);
}
</script>
i want to alert the name of the activity chosen but when i click on any activity, it shows the same. The first activity.ven if i have clicked on any other activity...can anyone help me ??
what you should do is change this:
onclick="hi()"
to this:
onclick="hi(this);
then your function would be:
function hi(who) {
var a = who.value;
alert(a);
}
In PHP side of things change:
<td width="50"><input type="radio" value="<?php echo $row_activities['activity_name']; ?>" name="activities" onclick="hi() " id="activities" /><?php echo " ".$row_activities["activity_name"]; ?></td>
To: ( YOU NEED Unique IDs on Input/ Radio Buttons to be generated dynamically & Sent to JS)
<?php $i = 1; ?>
<td width="50"><input type="radio" value="<?php echo $row_activities['activity_name']; ?>" name="<?php echo $row_activities['activity_name'].$i; ?>" id ="<?php echo $row_activities['activity_name'].$i; ?>" onclick="hi("<?php echo $row_activities['activity_name'].$i; ?> ")" /></td>
<?php $i++; ?>
In Javascript Change to This:
function hi(elementID) {
var value = document.getElementById(elementID).value;
alert(value);
}
Code may have some escape errors, but logically this should give you idea how to do it, Hope that helps.

Radio Button Value: "on"

i have this form, when user clicks on the submit button, a script open a popup where i need to print the radio button value. My problem is the printed value on the popup window: "on" but the result should be a number (selected person's id)
My PHP Code:
<form method="post" action="edit.php" onsubmit="target_popup(this,'edit.php')"><input type="submit" value="Modifica Giocatore" /><br /><br /><br />
<?php
//my queries (work)
?>
<table cellspacing="2" cellpadding="2">
<tr>
<th></th>
<th>Name</th>
<th>Surname</th>
</tr>
<?php
$i=0;
while ($i < $num) {
$id=mysql_result($results,$i,"ID");
$name=mysql_result($results,$i,"Name");
$surname=mysql_result($results,$i,"Surname");
?>
<tr>
<td><input type="radio" name="radioEdit" value"<?= $id; ?>" /><?= $id; ?></td>
<td><?=$name?></td>
<td><?=$surname?></td>
</tr>
<?php
$i++;
}
?>
<?php
echo "</table></form>"
?>
And this is my script:
function target_popup(form,page)
{
window.open(page, 'formpopup', 'left=100,top=100,width=600,height=400,menubar,toolbar,resizable');
form.target = 'formpopup';
}
edit.php file:
<?php
$prova = $_POST['radioEdit'];
echo $prova;
?>
Thanks.
The only way I could get this to work was to use sessions.
Here is what I could test without setting up an entire DB.
PHP
<?php
session_start();
$id="12345"; // test ID number
// works with sessions
$prova = $_POST['radioEdit'] = $_SESSION['id'] = $id;
echo $prova;
?>
<form method="post" action="edit.php" onsubmit="target_popup(this,'edit.php')">
<td><input type="radio" name="radioEdit" value"<?php echo $id; ?>" /><?= $id; ?></td>
<input type="submit" value="Modifica Giocatore" />
</form>
<script>
function target_popup(form,page)
{
window.open(page, 'formpopup', 'left=100,top=100,width=600,height=400,menubar,toolbar,resizable');
form.target = 'formpopup';
}
</script>
edit.php
<?php
session_start();
echo $_SESSION['id'];
echo $id;
echo "<br>";
var_dump($_SESSION['id']);
?>
What happens when you echo $id? Are you sure that it returns a value? Also isn't <?= ;?> considered really old and deprecated PHP? You should be using <?php echo ;?>

Categories