echo '<div class="col-lg-10 col-lg-offset-1 panel">' . "<table id='data' class='table'>
<tr>
<th></th>
<th>Document No</th>
<th>AWB NO</th>
<th>Order Id</th>
<th>Forms</th>
<th>Extras</th>
</tr>";
foreach ($cancel as $key => $value)
{
echo "<tr>";
echo "<td>" . "<input type='checkbox' name='name1' id='checkit$checkitCounter' />" . "</td>";
echo "<td>" . $value[$d] . "</td>";
echo "<td>" . $value[$a] . "</td>";
echo "<td>" . $value[$o] . "</td>";
echo "<td>" . $value[$f] . "</td>";
echo "<td>" . $value[$e] . "</td>";
echo "</tr>";
}
echo "</table></div>";
This above table is generated using php echo with checkbox generated every iteration.
<div style="padding-left:600px;">
<a href='#' class='btn btn-primary btn-md' id='button' style="margin-right:1000px;" onclick='checkit()'
role='button'>Continue..</a>
</div>
The above button is supposed to run a javascript function given below:
function checkit {
var x = document.getElementById("checkit").checked;
if (x == false) {
alert('All items are not removed,pls remove and continue');
}
else {
window.location = "tst.php";
}
}
The above JavaScript doesn't seem to be functioning properly as even though i have checked none of the boxes it just stays on the same page.
Example:
<div style="padding-left:600px;"> <a href='#' class='btn btn-primary btn-md' id='button' style="margin-right:1000px;" onclick='checkit()' role='button'>Continue..</a>
</div>
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
And js:
function checkit() {
var boxes = document.querySelectorAll(".checkit");
arr = [];
for (i = 0; i < boxes.length; i++) {
arr.push(boxes[i]);
}
console.log(arr);
function is_checked(val) {
return val.checked == true;
}
checked = arr.filter(is_checked);
console.log(checked);
if (checked.length != boxes.length) {
alert('All items are not removed,pls remove and continue');
} else {
window.location = "tst.php";
}
}
Demo: https://jsbin.com/cukuzeweza/edit?html,js,output
I have made a light version of your code and the rest is left to your development logic.
You have had a lot small problems in your code, like function in JavaScript needed (), the usage of single and double quotes, missing call the JavaScript function etc.
I have created a dummy array for test, but again you could do what you like to achieve your code.
Here is the working solution:
<?php
$cancel = ["checkBox1", "checkBox2", "checkBox3"];
echo "<div><table id='data' class='table'>
<tr>
<th></th>
<th>Document No</th>
</tr>";
foreach ($cancel as $value)
{
echo "<tr>";
echo "<td><input type='checkbox' name='name1' id='$value' onchange='checkIt(\"$value\");' /></td>";
echo "<td>" . $value . "</td>";
echo "</tr>";
}
echo "</table></div>";
?>
<script>
function checkIt(checkBoxId) {
var x = document.getElementById(checkBoxId).checked;
console.log("x" + checkBoxId + " is " + x);
}
</script>
You can see in your console the results of your checkbox.
Related
I have a row of data, which when clicked, show information about the object.
But I also have a button on the row, which when clicked performs some jquery wizzardry.
Anyway, I can't seem to prevent the row click and just fire the button stuffs.
I've tried:
return false;
e.preventDefault();
e.stopPropagation();
This is the function.
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
I have all 3 in there at the moment, but that's just for example. Although I have tried all 3 in there, but I have also tried each one separately.
Heres the HTML
<div class="row" id="check_container">
<div id='table_holder' class="col-md-12" >
<table id="org_table" class="sortable table table-striped tablesorter">
<?php
if(empty($org_data2)) {
// if there is no data for the selected filter
echo "There are no organisations set up.";
} else {
echo "
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Sub Orgs</th>
<th>Locations</th>
<th>Users</th>
<th>Compliance</th>
<th>O/D Checks</th>
<th>O/D Training</th>
<th>Renewal</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
";
foreach ($org_data2 as $orgs) {
if(!$orgs->descendant) {
echo "<tr id='" . $orgs->org_id . "' class='edit_org_row clickable'>";
echo "<td>" . (($orgs->ancestor)?'<div id="' . $orgs->org_id . '" class="show_sub_orgs btn btn-primary btn-xs" data-toggle="tooltip" title="Show Sub-Orgs"><i class="fa fa-expand" aria-hidden="true"></i></div>':'') . "</td>";
echo "<td data-title='Name'>" . $orgs->org_name . "</td>";
echo "<td data-title='Sub Orgs' class='text-center'></td>";
echo "<td data-title='Locations' class='text-center'>" . $orgs->locations . "</td>";
echo "<td data-title='Users' class='text-center'>" . $orgs->users . "</td>";
echo "<td data-title='Compliance' class='text-center'></td>";
echo "<td data-title='O/D Checks' class='text-center'>" . $orgs->checks . "</td>";
echo "<td data-title='O/D Training' class='text-center'>" . $orgs->training . "</td>";
echo "<td data-title='Renewal'>" . date("d/m/Y", strtotime($orgs->renewal_date)) . "</td>";
echo "<td data-title='Actions'><div data-id='3' id='" . $orgs->org_id . "' class='btn admin_login btn-success btn-sm' data-toggle='tooltip' title='Login as customer'>Login</div><div data-id='2' id='" . $orgs->org_id . "' class='btn btn-danger btn-sm' data-toggle='tooltip' title='Disable customer'>Disable</div></td>";
echo "</tr>";
}
}
}
?>
</tbody>
</table>
</div>
</div>
What am I doing wrong?
When you delegate to a child element you need to use e.stopImmediatePropigation()
Jquery uses it's own event system and this will stop any execution on the elements delegated to from the parent. e.stopPropigation() will allow all events delegated from the same parent to fire
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
})
I wrote this code to add column to a table using javascript and take the column name from a html textbox. But this is not working.
JavaScript :-
<script type="text/javascript">
$(document).ready(function () {
$('#btnAdd').click(function () {
var count = 3,
first_row = $('#Row2');
while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
});`enter code here`
var myform = $('#myform'),
iter = 4;
$('#btnAddCol').click(function () {
var col_name = document.getElementID("txt_col_name").value;
myform.find('tr').each(function(){
var trow = $(this);
if(trow.index() === 0){
trow.append('<td>'+colname+'</td>');
}else{
trow.append('<td><input type="text" name="al'+iter+'"/></td>');
}
});
iter += 1;
});
});
</script>
HTML :-
<form name="myform" id="myform">
<table id="blacklistgrid">
<tr id="heading">
<td>Employee ID</td>
<td>Employee Name</td>
<td>Basic Salary</td>
<td>Mobile Allowances</td>
<td>Travel Allowences</td>
<td>Internet Allowences</td>
<td>Sales Commission</td>
<td>Bonus</td>
<td>Net Salary</td>
</tr>
<?php
$sql1="SELECT user_id, user_fname, user_lname
FROM ".$prefix."users_info
WHERE user_st='1'";
$employee_info = $wpdb->get_results($sql1);
//var_dump($employee_info);
foreach ($employee_info as $employee_info_row)
{
$user_id = $employee_info_row->user_id;
$user_fname = $employee_info_row->user_fname;
$user_lname = $employee_info_row->user_lname;
echo "<tr id=\"row\">";
echo "<td>";
echo "$user_id";
echo "</td>";
echo "<td>";
echo "$user_fname $user_lname";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"bs\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"a1\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"a2\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"a3\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"sc\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"bns\" />";
echo "</td>";
echo "<td>";
echo "";
echo "</td>";
echo "</tr>";
}
?>
</table>
<input type="text" id="txt_col_name" name="add_col" />
<button type="button" id="btnAddCol">Add new column</button>
</br>
</br>
<input type="submit"></input>
</form>
I also want to add the new column between 'Internet Allowences' and 'Sales Commission'. Can anyone pls tell me how to do that. Thank You
Hope this help
jsfiddle.net/stormspirit/2zh64/1/
I'm using this code to expand database table row to reveal more information about the item, but it does exactly the opposite.
$("td span.expand").click(function() {
$(this).parents("tr.main").nextUntil("tr.main"). toggle();
});
When I open the table all rows that must be hidden are being shown and if I click on any main row it will hide that rows.
How to invert this?
Here's part of code I use for table (I know, it's messy):
echo '<table border="1" class="tabula">
<tr class="main">
<th width="30px">Nr.</th>
<th width="75px">Mašīnas numurs</th>
<th width="75px">Reģistrācijas numurs</th>
<th width="75px">Marka / Modelis</th>
<th width="75px">ID</th>
</tr>';
//Ieraksta datus tabulā
while($row = mysql_fetch_array($query))
{
echo "<tr class='main'>";
echo "<td width='30px'>" . $row['nr'] . "</td>";
echo "<td width='75px'>" . $row['numurs'] . "</td>";
echo "<td width='75px'><span class='expand'>" . $row['regnr'] . "</span></td>";
echo "<td>" . $row['modelis'] . "</td>";
echo "<td>" . $row['apzim'] . "</td>";
echo "</tr>";
echo "<tr class='hidden'>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "</tr>";
}
echo "</table>";
echo "<br>";
Try using CSS in your file and include the following:
<style>
.expand
{
display:none;
}
</style>
I use a jQuery-based toggle script, and that's what I used when I had a similar problem such as this.
You may need to use .hidden { display:none; } instead.
I have the following block of code and I'm not sure how to do what I'm wanting to do.
In essence I'm wanting the javascript popup to display that row's value, but (obviously) it's only showing the final row of data as the popup isn't set for each row but rather calls the variable when clicked.
Any help would be appreciated!
<?php
$result = mysql_query("SELECT hr_overtime.overtime_id, hr_user.name, hr_overtime.overtime_date, hr_overtime.overtime_type, hr_overtime.overtime_from, hr_overtime.overtime_to, hr_overtime.overtime_amount, hr_overtime.details
FROM hr_overtime
inner join hr_user
on hr_user.user_id = hr_overtime.user_id
where hr_overtime.overtime_status = 'Pending' order by hr_overtime.overtime_date ASC");
echo "
<table border='0'>
<tr>
<th class='tablecell_header'>Consultant</th>
<th class='tablecell_header'>Date</th>
<th class='tablecell_header'>Type</th>
<th class='tablecell_header'>From</th>
<th class='tablecell_header'>To</th>
<th class='tablecell_header'>Amount</th>
<th> </th>
<th> </th>
<th> </th>
</tr>";
while($row = mysql_fetch_array($result))
{
$work = $row['details'];
echo "<tr>";
echo "<td class='tablecell'>" . $row['name'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_date'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_type'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_from'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_to'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_amount'] . "</td>";?>
<td class='tablecell'> <button onclick="myFunction()">Show work</button> </td><script>
function myFunction()
{
alert("<?php echo $work;?>");
}
</script>
<?php
echo "<td valign='middle'><form action='manager_overtime_approve.php' method='post'>
<input name='approve_id' type='hidden' value='" . $row['overtime_id'] . "' />
<input type='submit' value='APPROVE' id='edit' />
</form></td>";
echo "<td valign='middle'><form action='manager_overtime_reject.php' method='post'>
<input name='cancel_id' type='hidden' value='" . $row['overtime_id'] . "' />
<input type='submit' value='REJECT' id='edit' />
</form></td>";
echo "</tr>";
}
echo "</table>";
?>
There is no need for a separate function which you are using incorrectly. You can simply use an inline alert for this:
<td class='tablecell'> <button onclick="alert('<?php echo $work;?>');">Show work</button>
You can't insert the declaration of myFunction() inside your foreach loop, that way you are overriding for each entry the behaviour showed thus it's only working for the last row.
one fast solution would be to insert the whole $work variable as an argument of your onclick function eg.
<td class='tablecell'> <button onclick="myFunction('<?php echo $work ?>')">Show work</button>
and then outside of the foreach loop you can define myFunction such as:
function myFunction(details){
alert(details)
}
I think, in result HTML you have a multiple definitions of myFunction() and javascript uses only last one. You can use a HTML tag attributes to show right information.
try this
$work .= $row['details'];
and set javascript out of the loop
good luck
That's because myFunction is a Javascript function, which is defined once and doesn not share the same scope as PHP. So $work hold just the last value.
I'd suggest something like this:
echo "<tr data-detail-value='$work'>";
...
<td class='tablecell'> <button onclick="myFunction(this)">Show work</button>
...
function myFunction(btn) {
alert(btn.parentNode.parentNode.getAttribute("data-detail-value"));
}
This is my code for my the current database populated table. I have found a previous Javascript code to help me sum values from multiple checkboxes.
The values I want summed are only from my Asset_Cost
<body>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr>
<th><h3>Asset ID</h3></th>
<th><h3>Vendor</h3></th>
<th><h3>Hardware </h3></th>
<th><h3>Cost</h3></th>
<th><h3>Purchase Date</h3></th>
<th><h3>Select Cost</h3></th>
</tr>
</thead>
<tbody>
<?php
$result = mysql_query("SELECT * FROM Asset");
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Asset_ID']."</td>";
echo "<td>" . $row['Vendor_Name'] . "</td>";
echo "<td>" . $row['Hardware_ID'] . "</td>";
echo "<td>" . $row['Asset_Cost'] . "</td>";
echo "<td>" . $row['DateOfPurchase'] . "</td>";
echo "</tr>";
}
echo "</table>";
I want to to integrate the checkbox sum from this code:
<?php
include('connect1.php');
$result = $db->prepare("SELECT * FROM Asset");
$result->bindParam(':userid', $res);
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
?>
<INPUT TYPE="checkbox" NAME="items[]" value="<?php echo $row['Asset_Cost'] ?>" id="sum_m_<?php echo $i ?>" onclick="UpdateCost()">
<td>
<?php echo $row['Asset_ID'] ?>
<?php echo $row['Vendor_Name'] ?>
<?php echo $row['Hardware_ID'] ?>
<?php echo $row['Asset_Cost'] ?>
</td>
<br>
<?php
}
?>
<br>
Total Cost : <input type="text" name="sen" id="totalcost" value="">
Here is the javascript
<script type="text/javascript">
function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<<?php echo $calculated ?>; i++) {
gn = 'sum_m_'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost' ).value = sum.toFixed(0);
}
window.onload=UpdateCost
</script>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr>
<th><h3>Select</h3></th>
<th><h3>Asset ID</h3></th>
<th><h3>Vendor</h3></th>
<th><h3>Hardware </h3></th>
<th><h3>Cost</h3></th>
<th><h3>Purchase Date</h3></th>
</tr>
</thead>
<tbody>
<?php
$result = mysql_query("SELECT * FROM Asset");
$calculated = mysql_num_rows($result);
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td><INPUT TYPE='checkbox' NAME='items[]' value='". $row['Asset_Cost'] ."' id='sum_m_$i' onclick='UpdateCost()'> </td>";
echo "<td>" . $row['Asset_ID']."</td>";
echo "<td>" . $row['Vendor_Name'] . "</td>";
echo "<td>" . $row['Hardware_ID'] . "</td>";
echo "<td>" . $row['Asset_Cost'] . "</td>";
echo "<td>" . $row['DateOfPurchase'] . "</td>";
echo "</tr>\n";
}
?>
<br>
Total Cost : <input type="text" name="sen" id="totalcost" value="">
<script type="text/javascript">
function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<<?php echo $calculated ?>; i++) {
gn = 'sum_m_'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost' ).value = sum.toFixed(0);
}
window.onload=UpdateCost();
</script>
</body>
Mostly things are as it is in your code. Only gave $calculated value equal to the number of rows in your mysql result. Hope this helps..