I have a table with some checkboxes in every row. There is a select element in the table footer with several options. When the user chooses an option, i want to pass the value of any checked checkboxes and the selected option to a php script.
This is the form:
<form name="doall" method="POST" action="action.php">
<table>
<tbody>
<?php for($j=0;$j<count($userToRead);$j++){ ?>
<tr>
<td>
<input type="checkbox" id="selection_<?php echo $j ?>" name="objectSelected[<?php echo $userToRead[$j]['id'] ?>]" value="1"/>
</td>
<td align="center">
<?php echo $userToRead[$j]['id'] ?>
</td>
<td align="center" style="text-align:center;padding-left:15px;background-color:<?php echo $SListsStatus[intval($userToRead[$j]['userstatus'])][1]; ?>;" >
</td>
<td align="center">
<?php echo stripaccenti($userToRead[$j]['user']) ?>
</td>
<td>
<?php echo stripaccenti($SUserType[$userToRead[$j]['type']]['name']) ?>
</td>
<td align="center">
<?php echo stripaccenti($userToRead[$j]['first_name']) ?>
</td>
<td align="center">
<?php echo stripaccenti($userToRead[$j]['last_name']) ?>
</td>
<td align="center">
<?php echo stripaccenti($userToRead[$j]['title']) ?>
</td>
<td class="actBtns">
<a href="#" title="Update" class="tipS">
<img src="images/icons/edit.png" alt="" />
</a>
<a href="#" title="Remove" class="tipS">
<img src="images/icons/remove.png" alt="" />
</a>
</td>
</tr>
<?php } // end for ?>
</tbody>
<tfoot>
<tr>
<td colspan="9">
<div class="itemActions">
<label>Con tutte le selezionate:</label>
<select name="whatDoAll">
<option value="1">Attiva</option>
<option value="2">Disattiva</option>
</select>
<input type="submit" value="Esegui" class="button redB" style="margin: 5px;"/>
</div>
</td>
</tr>
</tfoot>
</table>
</form>
So in every line of my table I have a checkbox where the value is the ID of the db object that I need to modify with my php script.
This is my script:
$('input[type="submit"]').click(function() {
var output = '';
$('input[type="objectSelected"]:checked').each(function(index) {
output += $(this).val() + ", ";
});
alert(output + "is checked!");
});
In the php file i try to retrieve the variable with $_POST['objectSelected'] but the variable is always empty. Also, the script alert is empty.
The tables are create with jquery: if I use a pure html table with pure html checkboxes everything works!
You are doing wrong. You are specifying input type then the code should be:
<script type="text/javascript">
$('input[type="submit"]').click(function() {
var output = '';
$('input[type="checkbox"]:checked').each(function(index) {
output += $(this).val() + ", ";
});
alert(output + "is checked!");
});
</script>
Hope this helps you
Related
<table class="table table-hover">
<tr>
<th>Sl.No</th>
<th> All </th>
<th>Regno.</th>
<th>Name</th>
<!--<?php echo "Core Subjects" ?> -->
<?php
foreach($getsubc as $rowc)
{
?>
<td align="center">
<?php echo $rowc['subcode']; ?>
<input type="checkbox" id="check-all" onClick="toggle(this,<?php echo $rowc['markid']; ?>)" value="<?php echo $rowc['markid']; ?>" checked="checked" data-checkbox-class="icheckbox_square-green">
</td>
</div>
<?php
}
?>
<!-- Elective subjects -->
<?php
foreach($getsube as $rowe)
{
?>
<td align="center">
<?php echo $rowe['subcode']; ?>
<input type="checkbox" id="check-all2" onClick="toggle(this,<?php echo $rowe['markid']; ?>)" value="<?php echo $rowe['markid']; ?>" data-checkbox-class="icheckbox_square-blue">
</td>
<?php
}?>
</tr>
<?php
$sno=1;
foreach($getstud as $row)
{
echo '<tr>'; ?>
<?php
echo '<td>'.$sno++.'</td>';
echo '<td><input type="checkbox" value="' . $row['regno'] . '" name="regno[]"></td>';
echo '<td>'.$row['regno'].'</td>';
echo '<td>'.$row['name'].'</td>';
?>
<?php ?>
<?php foreach($getsubc as $row1)
{?>
<td align="center"> <input type="checkbox" data-checkbox-class="icheckbox_square-green" name="friend_id[]"
value="<?php echo $row1['markid'];?>" >
</td>
</td>
</div>
</td>
</div>
</div>
<?php
} ?>
<?php
foreach($getsube as $row2)
{
?>
<td align="center"> <input type="checkbox" data-checkbox-class="icheckbox_square-blue" name="friend_id[]" value="<?php echo $row2['markid']; ?>" /> </td>
<?php
}
echo '</tr>';
}
?>
</table>
<script src="<?= base_url('assets/plugins/iCheck/icheck.min.js') ?>"></script>
$('input:checkbox').iCheck({
increaseArea: '25%' // optional
});
</script>
<script language="JavaScript">
function toggle(source, markid) {
checkboxes = document.getElementsByName(markid);
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
i changes the code accordingly your solution . but not working both color and select_all method . whats wrong with this code
i changes the code accordingly your solution . but not working both color and select_all method . whats wrong with this code
i changes the code accordingly your solution . but not working both color and select_all method . whats wrong with this code
First, change your iCheck initialization to this:
$('input:checkbox').iCheck({
increaseArea: '25%' // optional
});
Then do this on first set:
<td align="center">
<?php echo $row1['subcode']; ?>
<input type="checkbox" id="check-all" onClick="toggle(this,<?php echo $row1['markid']; ?>)" value="<?php echo $row1['markid']; ?>" checked="checked" data-checkbox-class="icheckbox_square-green">
</td>
And then on your second set:
<td align="center">
<?php echo $row2['subcode']; ?>
<input type="checkbox" id="check-all2" onClick="toggle(this,<?php echo $row2['markid']; ?>)" value="<?php echo $row2['markid']; ?>" data-checkbox-class="icheckbox_square-blue">
</td>
Notice the use of data-checkbox-class attribute on each of the input:checkbox tags. Which you can apply the same on the ones within data tables.
I make Jquery to read data from db and when I click the list it shown roe data on detail box.
But.... problem: I make div where I show content. I load page with Jquery to div.
but when I do this the row click dont work. I can not understan why. It is shild element but id i understan right when I use getElementById it should to take current row, but no.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<?php include './config/init.php'; ?>
<html>
<head>
<meta charset="UTF-8">
<title>Biisilista</title>
<script src="./js/jquery-3.2.1.js"></script>
<link href="css/basic.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>KaraokeBiisit </h1>
<div id="edit" style="display:none">
<div>
<form name="formedit" method="post" action="">
<table id="edittable" border="1" cellspacing="2" cellpadding="1">
<tbody>
<tr>
<td>
<label>Nimi:</label>
</td>
<td>
<input id="nimi" name="nimi" placeholder="Kappaleen nimi" type="text">
</td>
<td>
<label>Levy:</label>
</td>
<td>
<input id="levy" name="levy" placeholder="Levyn tunnus" type="text" width="10px">
</td>
</tr>
<tr>
<td>
<label>Artisti:</label>
</td>
<td>
<input id="artisti" name="artisti" placeholder="Kappaleen esittäjä" type="text">
</td>
<td>
<label>Kieli:</label>
</td>
<td>
<input id="kieli" name="kieli" placeholder="Alkuperäiskieli" type="text" width="20">
</td>
</tr>
<tr>
<td>
<label>Numero:</label>
</td>
<td>
<input id="numero" name="numeron" placeholder="Numero" type="text">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div id="pageContent">
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
jQuery(document).ready(function ($) {
$("#pageContent").click(function () {
$('tr').removeClass('selected');
$(this).addClass('selected');
var selectedRow;
selectedRow = $(rivi);
var td = $(selectedRow).children('td');
$('#nimi').val(td[0].innerText);
$('#artisti').val(td[1].innerText);
$('#levy').val(td[2].innerText);
$('#kieli').val(td[3].innerText);
$('#numero').val(td[4].innerText);
console.log("test");
});
$(".clickable-row").on('click', () => {
$('#edit').show();
});
$('#pageContent').load('container.php');
// $('#pageContent').load('biisit.php');
});
function showBiisit() {
console.log("Näytetään sisältö");
$('#pageContent').load('container.php');
}
<?php include './config/init.php'; ?>
<?php
//luodaan tietokantaobjekti
$db = new DataBase();
// tehdään kysely
$db->query("SELECT * FROM kappaleet");
//query("SELECT `id`,`nimi`,`artisti`,`levy`,`kieli`,`numero` FROM `kappaleet`;");
//yhdistetään hakutulokseen
$kappaleet = $db->resultset();
?>
<table id="dataTable">
<tr>
<th>Nimi</th>
<th>Artisti</th>
<th width="100" align="left">Levy</th>
<th width="100" align="left">Kieli</th>
<th width="100" align="left">Numero</th>
</tr>
<?php foreach ($kappaleet as $biisi): ?>
<tr class='clickable-row' >
<td><?php echo $biisi->nimi ?></td>
<td><?php echo $biisi->artisti ?></td>
<td><?php echo $biisi->levy ?></td>
<td><?php echo $biisi->kieli ?></td>
<td><?php echo $biisi->numero ?></td>
</tr>
<?php endforeach; ?>
</table>
try this
...
$("body").on('click', '.clickable-row', function () { //i change this line
$('tr').removeClass('selected');
$(this).addClass('selected');
var selectedRow = $(this);
//selectedRow = $(rivi); idk what is this
var td = selectedRow.children('td');
$('#nimi').val(td[0].innerText);
$('#artisti').val(td[1].innerText);
$('#levy').val(td[2].innerText);
$('#kieli').val(td[3].innerText);
$('#numero').val(td[4].innerText);
console.log("test");
});
...
First I will tell what I want to achieve, and then I will explain how I was trying to do it.
I have two tables, one stores type of vessels with a description and their own Id. Then I have another table in wich the vessel type has been stored as text. My goal is to select each one (both records in both tables) with a checkbox in both and store in the table 2 the Id from the table 1.
I will introduce data, to help.
Table 1
1|Balandra|Some description
2|Bergantin|Some description
3|Whatever |Whatever.....
Table2
Balandra
Bergantin
Whatever
Then, I have created a php page that shows both tables with the checkbox I mentioned above. Checkboxes store the Table1 Id and Table2 vesseltypename.
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th class="hidden-xs">idtiponavio</th>
<th>Tipo de Navío</th>
<th>Descripción</th>
<th>Agrupar</th>
</tr>
</thead>
<tbody>
<?php foreach ($naviosdyncoop as $key => $navio) { ?>
<tr>
<td align="center">
<a href=<?php echo '../vista/modificar.php?id=' .
$navio['idtiponavio']; ?> class="btn btn-default"><em class="fa fa-
pencil"></em></a>
<a href=<?php echo '../datos/borrar.php?id=' .
$navio['idtiponavio']; ?> class="btn btn-default"><em class="fa fa-
trash"></em></a>
</td>
<td class="hidden-xs"><?php echo
$navio['idtiponavio']; ?></td>
<td><?php echo $navio['tiponavio']; ?></td>
<td><?php echo $navio['descripcion']; ?></td>
<td><input type="checkbox" name="agruparid" value=<?
php echo $navio['idtiponavio']; ?> /></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="col-md-6">
<div class="panel-body paneltodo">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th>Tipo de Navío</th>
<th>Agrupar</th>
</tr>
</thead>
<tbody>
<?php foreach ($naviosforsea as $key => $navio) { ?>
<tr>
<td align="center">
<em class="fa fa-arrow-circle-o-left"></em>
</td>
<td><?php echo $navio['typevessel']; ?></td>
<td><input type="checkbox" name="agruparvessel" value=<?php echo $navio['typevessel']; ?> /></td>
</tr>
<?php } ?>
</tbody>
</table>
So, I want to check both table records and store the table1 Id in the table2 idtypevessel field.
I thought that a php file could store both items and call the update function with those parameters, like this:
<?php
require './modelo.php';
$idnavio = $_GET['agruparid'];
$vessel = $_GET['agruparvessel'];
Any suggestions, because I think I have to do a button to submit this parameters, but it must be working on both tables, and I don't know how to access both foreach loop at the same time.
Thanks in advance.
E. Salas
review bellow reference code to submit multi selected checkbox values
for multi selected checkbox submission you must use [] operator after name attribute in html
index.php
<form action="/checkbox.php" method="post">
<strong>Cars:</strong><br>
<?php
$cars = array("Volvo", "BMW", "Toyota");
$colors = array("Red", "Green", "Black");
foreach($cars as $single){
?>
<input type="checkbox" name="cars[]" value="<?php echo $single; ?>">
<?php
}
<br>
<strong>colors:</strong><br>
foreach($colors as $single){
?>
<input type="checkbox" name="colors[]" value="<?php echo $single; ?>">
<?php
}
?>
<br>
<input type="submit" value="Submit!">
</form>
checkbox.php
<?php
echo "<pre>";
var_dump($_POST);
exit;
In your case:
<form action="/checkbox.php" method="post">
<div class="col-md-6">
<div class="panel-body">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th class="hidden-xs">idtiponavio</th>
<th>Tipo de Navío</th>
<th>Descripción</th>
<th>Agrupar</th>
</tr>
</thead>
<tbody>
<?php foreach ($naviosdyncoop as $key => $navio) { ?>
<tr>
<td align="center">
<em class="fa fa-pencil"></em>
<em class="fa fa-trash"></em>
</td>
<td class="hidden-xs"><?php echo $navio['idtiponavio']; ?></td>
<td><?php echo $navio['tiponavio']; ?></td>
<td><?php echo $navio['descripcion']; ?></td>
<td><input type="checkbox" name="agruparid[]" value=<?php echo $navio['idtiponavio']; ?> /></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="col-md-6">
<div class="panel-body">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th>Tipo de Navío</th>
<th>Agrupar</th>
</tr>
</thead>
<tbody>
<?php foreach ($naviosforsea as $key => $navio) { ?>
<tr>
<td align="center">
<em class="fa fa-arrow-circle-o-left"></em>
</td>
<td><?php echo $navio['typevessel']; ?></td>
<td><input type="checkbox" name="agruparvessel[]" value=<?php echo $navio['typevessel']; ?> /></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<input type="submit" value="Submit!">
</form>
Finally I solved this with Javascript. One of my partners helped me, I post this to help people in my situation.
I created a script, here is the code:
<script type="text/javascript">
function cogeNavioDyncoopnet(){
var checkedValueNavioD = null;
var inputElements = document.getElementsByClassName('checknaviod');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValueNavioD = inputElements[i].value;
break;
}
}//return checkedValueNavioD;
var input_nav_dyn = document.getElementById("nav_dyn");
input_nav_dyn.value = checkedValueNavioD;
}
function cogeNavioForSea(){
var checkedValueNavioFs = null;
var inputElements = document.getElementsByClassName('checknaviofs');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValueNavioFs = inputElements[i].value;
break;
}
}//return checkedValueNavioFs;
var input_nav_fs = document.getElementById("nav_fs");
input_nav_fs.value = checkedValueNavioFs;
}
</script>
Then I created a Form below, that collects values and sends them to my .php control file.
<div class="hidden-xs">
<form class="hidden-xs" method="POST"
action="../datos/actualizarnavios.php">
<input id="nav_dyn" type="text" name="idnaviodyncoop">
<input id="nav_fs" type="text" name="navioforsea" >
<input id="botonasignar" type="submit" name="enviardatosdynfs">
</form>
</div>
I hope this helps. Thanks for the feedback, as always.
How do I create a jQuery hover to show a div when the mouse is over like twitter repla retweet and favorite?
Here is my HTML:
<div style="display:none;" id="blab">
<?php echo $blab_id; ?>
</div>
<a href="blab.php?id=<?php echo $blab_id; ?>">
<div class="blab_body" id="hover" value="Hide">
<table>
<tr>
<td valign="top">
<img src="<?php echo $profile_pic_info; ?>" class="blab_image" width="50" height="50" />
</td>
<td> </td>
<td>
<table>
<tr>
<td valign="top">
<a href="profile.php?id=$mem_id">
<strong><?php echo $added_fullname; ?></strong>
</a>
<?php echo $added_to_fullname; ?>
</td>
</tr>
<tr>
<td>
<?php echo $blab_body; ?>
</td>
</tr>
<tr>
<td>
<text style="color:gray;">
<?php echo $blab_date; ?>|<?php echo $device; ?>
</text>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="background:#000; display:none;" id="id"> </div>
</div>
</a>
<hr />
and here is my JavaScript code:
$('#id').hide();
$('#hover').hover(function () {
var blab_id = $('#blab').text();
$('#id').show();
}, function () {
$('#id').hide();
});
It shows the div for the first one only.
You can only use a certain ID once on the whole page! If you insert more than one copy of this div on the page, your HTML code becomes invalid. That's why jQuery only attaches the event handler to the first element.
The solution is to use class="hover_enabled" instead of id="hover" as it is allowed to add the same class to multiple elements. Here is how you would do it in jQuery:
$('.hover_enabled').hover(function() { ...
The same thing applies to #id.
I have a simple PHP while loop which executes a list of tabular comments/posts from the SQL database. Each post has a reply hyperlink that that will open a textarea (form) below the post which will allow the user to reply to that specific post. It works fine for one post, but when there are multiple posts the jQuery opens all of the textareas for each post. I assume that this is an issue with me calling identical classes using jQuery. But I am not sure how to deal with it. What I would like to achieve is allowing the user to click on a reply hyperlink within a specific post and only that textarea will appear underneath and not all of them at the same time.
Here is the PHP code to generate the list of posts with the reply feature.
<?php>
echo "<table width=\"100%\" border=\"0\" cellspacing=\"10\">";
while ($row2 = mysql_fetch_assoc($res))
{
echo "
<tr>
<td>
<span class=\"anonname\">Anon" . $row2['uid'] . " </span>
<span class=\"smalltext\"> says:</span>
</td>
</tr>
<tr>
<td>
<span class=\"messagetext\">" . $row2['msg'] . "</span></td>
</tr>
<tr>
<td>
<div class=\"replystyle\"><span class=\"replytext\"><a href=\"#\"
class=\"replybtn\">Reply</a> ⋅ Like </span> <span
class=\"replytext\" style=\"float:right;\"><span class=\"timetext\">" .
$row2['timestamp'] . "</span>Report</span></div>
</td>
</tr>
<tr>
<td>
<div id=\"replymsgbox\">
<form id=\"messaging\" action=\"\" method=\"post\" accept-charset=\"UTF-8\">
<div class=\"tarea\">
<textarea name=\"message\" rows=\"2\" class=\"txtbx\"></textarea>
</div>
<span style=\"float:right;\"><input name=\"submit\" class=\"signupbtn\"
type=\"submit\" value=\"share\" /></span><br/><br/>
</form>
</div>
</td>
</tr>";
}
echo "</table>";
}
?>
Here is the jQuery
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('.replymsgbox').hide();
$('.replybtn').click(function(){
$('.replymsgbox').slideToggle('fast');
});
});
</script>
Any help would be appreciated.
With $('.replymsgbox') selector, you are getting all the element having such class.
To get just the one related to the button, use:
$('.replybtn').click(function(){
$('.replymsgbox', $(this).parent().parent().next()).slideToggle('fast');
});
You are narrowing research of a .replymsgbox element inside next <tr> this way.
(This isn't an answer, just an observation; comments don't allow such formatting)
This is what I wrote about in my comment to your question:
<table width="100%" border="0" cellspacing="10">
<?php
while ($row2 = mysql_fetch_assoc($res)) {
?>
<tr>
<td>
<span class="anonname">Anon<?php echo $row2['uid'];?></span>
<span class="smalltext"> says:</span>
</td>
</tr>
<tr>
<td>
<span class="messagetext"><?php echo $row2['msg']; ?></span></td>
</tr>
<tr>
<td>
<div class="replystyle"><span class="replytext"><a href="#"
class="replybtn">Reply</a> ⋅ Like </span>
<span class="replytext" style="float:right;"><span
class="timetext"><?php echo $row2['timestamp']; ?></span>Report</span></div>
</td>
</tr>
<tr>
<td>
<div id="replymsgbox">
<form id="messaging" action="" method="post" accept-charset="UTF-8">
<div class="tarea">
<textarea name="message"rows="2" class="txtbx"></textarea>
</div>
<span style="float:right;"><input name="submit" class="signupbtn"
type="submit" value="share" /></span><br/><br/>
</form>
</div>
</td>
</tr>
<?php } ?>
</table>
See how that cleans up much better? Now if you want to make changes to your HTML, you don't have to through all the complex escaping machinations.