<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript'>
$(window).load(function(){
$('#varx2').click(function() {
$("#txt").toggle(this.checked);
});
});
</script>
<?php
print "<table>";
if($items)
foreach($items as $i){
print "<tr>";
print"<td><input type='checkbox' id='varx2' name='checkbox[]' value='$i->logi_id'/></td>"; //CHECKBOX
print "<td id='txt' style='display:none'>$i->logi_jo</td>";
print "<td>$i->logi_cntrlnum</td>";
print "</tr>";
}
print "</table>";
?>
gud day, this is a show/hide java script.. when i click or check the checkbox, the row will extent beside, the problem is only the first row/result is extending.. can u pls help me.. ty
IDs must be unique, ID selector only selects the first element that has a specific ID, you should use classes instead:
print "<td class='txt' style='display:none'>$i->logi_jo</td>";
Id's for each element need to be unique. JQuery will just select the first one, unlike a class selector for example will select all elements with a class. Try set the id to the item id or name or something else unique.
Remove id and put it as a class.
jQuery function will be
$('.varx2').each(function(){
$(this).click(function(){
// do whatever you want
});
})
Related
I have a table that is being populated by a given sql query, that has a radio button at the end.
How can i get the entire row value of a selected radio button passed to a different page?
results=mysqli_query($conn,$sqlitem);
while ($dat=mysqli_fetch_assoc($results)){
echo "<tr>";
echo "<td>".$dat['sellername']."</td>";
echo "<td>".$dat['itemname']."</td>";
echo "<td>".$dat['maker']."</td>";
echo "<td>".$dat['details']."</td>";
echo "<td>".$dat['condition']."</td>";
echo "<td>".$dat['price']."</td>";
echo "<td> <input type='radio' name='selc' width ='5px'> </td>";
echo "</tr>";
}
I have tried various combinations but for some reason the entire row value doesn't come. The last and closest option that I tried was this SOMETHING CLOSELY SIMILAR
I took the script portion and updated still isn't working. I believe there should be some solution for this.
You should probably use the MySQL primary key for each row, pass that info to the next page and have PHP perform a query for that item on the new page rather than explicitly passing content around from page to page.
That said, you can keep track of the order that you are echoing the keys in an array, then use that array to turn the row into an object:
var keys = ['sellername','itemname','maker','details','condition','price'];
$('input[type=radio]').on('change', function(event) {
if (this.checked) {
var $tr = $(this).closest('tr');
var $cells = $tr.find('td');
var obj = {};
$.each($cells, function(index, cell) {
obj[keys[index]] = cell.textContent;
});
console.log('row data', obj);
}
});
Note this is untested, but just demonstrates how you can match up an array of key names to the index their data can be found in a table cell
I want to get the text of just which table data is clicked on. i.e. get $post_no value if clicked on post_no, get the word 'description' if clicked on description. I have tried a number of ways but cannt get what i want. whats the approach?
my php code:
echo "<table border=1>";
echo "<tr><th>Post No</th><th>Writer ID</th><th>Writer Name</th><th>Title</th><th>Description</th><th>Summary</th><th>Approval</th></tr>";
while ($row= mysqli_fetch_array($r2)){
$post_no=$row['post_no'];
$writer_id=$row['writer_id'];
$writer_name=$row['writer_name'];
$title=$row['title'];
$description=$row['description'];
$summary=$row['summary'];
echo "<tr height='50' class='x"."". " '>";
echo "<td class='r'>".$post_no."</td>";
echo "<td class='r'>".$writer_id."</td>";
echo "<td class='r'>".$writer_name."</td>";
echo "<td class='r'>".$title."</td>";
echo "<td class='r'>".'description'."</td>";
echo "<td class='r'>".'summary'."</td>";
echo "<td class='r'>Approve</td>";
echo "</tr>";
}
echo "</table>";
javascript code;
<script>
$(document).ready(function(){
$(".x").each(function(i){
$(this).click(function(){
console.log($(this).children().eq(i).text());
});
});
});
</script>
I would do this
$('.x').click(function (e) {
var $target = $(e.target);
console.log($target.text());
});
So you just want the value of $post_no if you click on the according div? Then why don't you just bind the event on that class?
$(".r").click(function() {
console.log($(this).text())
});
Since people continue to downvote this - for whatever reason - here you go, fiddle. If i do something wrong, tell me and don't just downvote.
https://jsfiddle.net/LcbwL85m/
So you want to know on what value you've clicked on, but the binding remains on the row?
Perfectly possible:
$(document).ready(function(){
$(".x").click(function(event){
console.log(event.target); //Log where you clicked
console.log($(event.target).text());
});
});
Why should this work?
In the event handler that we add to the clicking event when we click the elements with class x (every row), we pass a reference to the event itself.
In this reference we have access to a lot of information about the event, like in this case the target. The target is the Element where there is really clicked.
Because Javascript works with event bubbling, you do not need to set the handler on every element, but you can set it on a top level (even on 'body' would work), and with this (event.target) you can see where the user really clicked.
Because we now know the element that the user clicked, we can pass that reference to a jQuery object ($(event.target)) and utilise the text() function.
echo "<table border=1>";
echo "<tr><th>Post No</th><th>Writer ID</th><th>Writer Name</th><th>Title</th><th>Description</th><th>Summary</th><th>Approval</th></tr>";
while ($row= mysqli_fetch_array($r2)){
$post_no=$row['post_no'];
$writer_id=$row['writer_id'];
$writer_name=$row['writer_name'];
$title=$row['title'];
$description=$row['description'];
$summary=$row['summary'];
echo "<tr height='50' class='x"."". " '>";
echo "<td class='r'>".$post_no."</td>";
echo "<td class='r'>".$writer_id."</td>";
echo "<td class='r'>".$writer_name."</td>";
echo "<td class='r'>".$title."</td>";
echo "<td class='r'>".$description."</td>";
echo "<td class='r'>".$summary."</td>";
echo "<td class='r'>Approve</td>";
echo "</tr>";
}
echo "</table>";
// jquery part
<script>
$(document).ready(function(){
$(document).on('click','.r',function(event){
event.preventDefault();
var td_txt = $(this).text();
console.log(td_txt);
//or you can use alert.
});
});
</script>
the php values of 'description' and 'summary' were not concatenated properly.
in the jquery part you can use alert as well to get the value of respective td
$(function() {
$("#table_test").find("td").each(function() {
$(this).click(function() {
alert($(this).text());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table_test" border="1">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
With this code, you can alert the value of each td.
This code use .each(), which is not advisable, better use event.target on click on table.
Not sure why everyone is going for complicated solutions. Just use a selector that targets the elements you desire:
$("tr.x td.r").click(function(){
console.log($(this).text());
});
or even just:
$(".r").click(function(){
console.log($(this).text());
});
Dynamic elements:
If you are after something more efficient, you can use a delegated event handler. This has the advantage that it will still work if items are added dynamically to the table:
$("table").on('click', 'td.r', function(){
console.log($(this).text());
});
This works by listening for events (in this case click) to bubble up to the non-changing ancestor element, then it applies the jQuery filter (in this case td.r) to just the elements in the bubble-chain. It then applies the function to just the element that caused the event. The upshot of all this is that the elements only need to exist at event time and not when the event was registered.
The target of the delegated event should be a non-changing ancestor element. In this example I just chose table. If nothing is close/convenient the default to use is document (do not use body as it has a bug that can stop mouse events responding)
I am trying to get all selected checkbox values with JavaScript, but I have not been able to accomplish it until now. This is what I have tried. What am I doing wrong?
JS:
var femaleMatches = [];
$(".selectFemaleService:checked").each(function() {
console.log('found a female');
femaleMatches.push(this.value);
});
PHP:
echo "<div class='checkbox'><label><input id='selectFemaleServices' name='selectFemaleServices' type='checkbox' value='$id'>$description</label></div>";
Your jQuery is selecting by class, yet your checkboxes have an id. If there are multiple checkboxes you should change the id to class so you don't end up with duplicates.
echo "<div class='checkbox'>"
. "<label>"
. "<input class='selectFemaleServices' name='selectFemaleServices' type='checkbox' value='$id'>$description"
. "</label>"
. "</div>";
You should use the input name instead of the class to select it using jQuery
$("input[name='selectFemaleServices']:checked").each(function() {
I think this will help, the included fiddle shows how it does populate the array. You might need to change the way in which it is adding / or add remove functionality, but this will get you the value in the array
var femaleMatches = [];
$(".selectFemaleService").click(function() {
if($(this).is(':checked')){
console.log('found a female');
femaleMatches.push($(this).val());
console.log(femaleMatches);
}
});
http://jsfiddle.net/8uZ3e/
try this:
var femaleMatches = [];
$(".selectFemaleService").each(function() {
if(this.checked){
console.log('found a female');
femaleMatches.push(this.value);
}
});
http://jsfiddle.net/JPvwJ/
I´m trying to build a shopping cart in jQuery and PHP but cannot read values from form list.
When trying to get value from the form that is submitted i only get values from
the first form in the list view.
Please look at behaviour here:
http://www.adlertz.se/index.php?op=prodlist&katID=9&sidemenu=menushop
Click buy on ex. the middle, you get value from first.
Please help me with this, i have benn looking for solution for three days.
Probably a simple problem but i cant find the answer anywhere :| !!!.
Many thanks in advance!
function prodlist(){
$katID = $_GET['katID'];
$sql = mysql_query("SELECT * FROM shop_prod WHERE kategoriID=$katID");
while ($rad=mysql_fetch_array($sql)) {
echo "<div class=\"shop_prod_list\">";
echo "<div class=\"shop_prod_list_tmb\"><img src=\"shop/images/prod_images_tmb/".$rad['prodID'].".png\" alt=\"\"></div>";
echo "<form id=\"addcartform\" class=\"addcartform\" method=\"post\">";
echo "<input type=\"hidden\" name=\"prodID\" id=\"prodID\" value=\"".$rad['prodID']."\" />";
echo "<input type=\"submit\" class=\"shop_prod_list_kundvagn\" value=\"\" id=\"addcart\"/>";
echo "</form>";
echo "</div>";
}
echo "<div id=\"search_results\"></div>";
}
$(document).ready(function(){
$(".addcartform").click(function(e){
e.preventDefault();
addcart();
});
});
function addcart(){
var prodID=(this).document.getElementById('prodID').value; <-(Reads value but only the first)
$.post("functions/cart.php", {prodID : prodID}, function(data){
if (data.length>0){
$("#search_results").show();
$("#search_results").html(data);
}
})
}
<?php
include "db_config.php";
include "db_connect.php";
$prodID = strip_tags(substr($_POST['prodID'],0, 100));
$prodID = mysql_escape_string($prodID);
echo $prodID ." is added.";
?>
Use class instead of id
echo "<input type=\"hidden\" name=\"prodID\" class=\"prodID\" value=\"".$rad['prodID']."\" />";
Send the element which was clicked to your function
$(".addcartform").click(function(e){
e.preventDefault();
addcart(this); //this line
});
Then use that element to find the input with your class
function addcart(element){
var prodID = $(element).find('.prodID').val(); //Get val of clicked item
$.post("functions/cart.php", {prodID : prodID}, function(data){
if (data.length>0){
$("#search_results").show();
$("#search_results").html(data);
}
})
Although i would use only one button, without a form like this.
Php:
echo "<button name='prodID' class='shop_prod_list_kundvagn addcart' data-prodid='".$rad['prodID']."' value='Add' />";
Javascript:
$(".addcart").click(function(e){
e.preventDefault();
var prodID = $(this).data('prodid');
$.post("functions/cart.php", {prodID : prodID}, function(data){
if (data.length>0){
$("#search_results").show();
$("#search_results").html(data);
}
});
});
The code you use to pick out the value is not correct.
In theory you are supposed to have unique id's - so thats your first issue to resolve.
Secondly you need to find a better way to locate the value you are interested in.
My suggestion would be to add a button within each form and call it 'submit'.
On this button you add a data attribute that contains the product id.
With an onclick handler on this button you'll be able to get the data attribute directly.
Example which is not tested:
<button data-prodid="XYZ" onlcick="handleclick()">submit</button>
Javascript:
$(this).data('prodid')
Please note that you should not have duplicate IDs on the same page.
In this case, all three of your products have the id of "prodID". So in your JavaScript, when you getElementById, you will always get the first ID with that name.
There are many solutions for this. For example, you could add the product ID to the ID of the button, like 'id="addcart_' . $rad['prodID'] . '"'
You'd then parse that ID upon form submit to determine which product was selected.
I found another solution here: http://api.jquery.com/serialize/ - to pass hidden values.
But your solution is much simpler :)
Hi again :)
I'm using jQuery script to show/hide some content:
<script type="text/javascript">
$('.toggleButton').click(function() {
var id = this.id.replace('toggleButton', '');
$('#content' + id).toggle();
});
</script>
Since I'm using PHP, I am iterating through few items and each of them has a button to show/hide its content. My content is actually a form with few input fields. In each item, first field of my form has a same name (let's say 'line1').
What I would like to do is when I click on an item and open its content, to take a focus on input field 'line1'. When I click on other item to take a focus on its 'line1' field, and so on...
Preferably with jQuery because I suppose it would be simpler, but javascript solution would be also great :)
Thanks for any help!
EDIT: I will attach a part of code which is that I need to show and hide... Maybe it will be of some help... I am using codeigniter, so not to be confused by some functions :)
echo "<div class=\"toggleButton\" id=\"toggleButton".$item['id']."\">CLICK TO OPEN</div>";
echo "<div class=\"content\" id=\"content".$item['id']."\" style=\"display:none;\">";
echo form_open('title/add'); // codeigniter's open form
for ($i = 1; $i <= $item['rows']; $i++) {
echo "<input type=\"text\" class=\"line\" id=\"line".($i)."\">".br();
}
echo form_submit('submit', 'submit'); // codeigniter's submit for button
echo "</form>";
echo "</div>";
Change your last line to:
$('#content' + id).toggle().find('input').first().focus()
did you try giving common class name and call function based on class name