Develop Reference

can't access to value tag for show data in jquery , mysql , php

the below code is jquery code:
$(document).ready(function(){
$("#srchtxt").keyup(function(){
var addresshome = $("#srchtxt").val();
$.post("adrespath",{address:addresshome},function(res){
var json = JSON.parse(res);
var lenths = json.length;
for(var i = 0;i <= lenths;i++)
{
var city = json[0];
var state = json[1];
var optionli = "<li id='item'><a href='#' value='"+res+"'>"+city+"-"+state+"</a></li>";
$(".resultsearch .ul").append(optionli);
}
});
});
$(".ul li#item a").each(function(){
$(this).click(function(e){
e.preventDefault();
var index_address,address;
index_address = $(this).parent().index();
alert(index_address);
address = $(this).eq(index_address).attr("value");
$("#srchtxt").attr("value",address);
});
});
$("#srchbtn").click(function(){
alert($("#srchtxt").val());
});
});
and the below code is html code:
<input type="search" name="srchtxt" id="srchtxt"/>
<div class="resultsearch">
<ul class="ul">
</ul>
</div>
and the below code is php code:
<?php
$address = $_POST['address'];
$querysrch = "select city,state,bolv from tbl where city like '%".$address."%' or state like '%".$address."%' or bolv like '%".$address."%'";
$ressrch = mysqli_query($cnt,"SET NAMES 'utf8'");
$ressrch = mysqli_query($cnt,"SET CHARACTER 'utf8'");
$ressrch = mysqli_query($cnt,"SET character_set_connection = utf8");
$ressrch = mysqli_query($cnt,$querysrch);
$arry = array();
if(mysqli_num_rows($ressrch) > 0){
while($row = mysqli_fetch_assoc($ressrch)){
$addressres = $row['city']."-".$row['state']."-".$row['bolv'];
$arry[] = $row['city'];
$arry[] = $row['state'];
}
}
else
{
$arry .= "<li id='item'><a href='#' value='not found'>notfound</a></li>";
}
echo json_encode($arry);
?>
i want when keyup chaarcter show result and when i select the li a tag show to me value tag in jquery please help me

i think your code also works fine but you forget to add id on anchor tag while appending it on ul. if you append more then one anchor tag than you should use class because there can't be a two anchor tag with same id which will make conflict. or you can use onclick attribute on your anchor tag
append your anchor tag like this
var optionli = "<li id='item'><a href='#' value='"+res+"' onclick='show_value()'>"+city+"-"+state+"</a></li>";
and js function
function show_value(){
alert($("#srchtxt").val());
}

How can i implement search like ctrl+f with jquery

Hi i am trying to search on page table tbody, the search is should be like ctrl + F search this my html and php code:
Please refer the image and link linked below for the sources.
<table>
<thead>
<tr><td><input type="text" placeholder="Search Student id="searchStudent"> </td>
<td></td><td></td><td></td><td></td><td></td></tr>
</thead>
<tbody>
<tr>
<td>
<span><img src="<?php echo $gdScoreData['profile_pic']; ?>"/></span>
<p><?php echo $gdScoreData['student_fname'];?> <?php echo $gdScoreData['student_lname'];?></p>
<p><b>Hallticket</b> : S<?php echo $gdScoreData['student_pid']; ?>J<?php echo $jobID; ?></p>
</td>
<td></td><td></td><td></td><td></td><td></td></tr>
1st tr will close here php code is the above one in html it looks like shown in image:
<tr><td><span><img src="profile_pic/first_1479536519.jpg" width="50" /></span><p>Robert Smith</p><p><b>Hallticket</b> : S27J2</p></td></tr>
</tbody>
</table>
This my javascript code to search like ctrl + F
/* Search Student like ctrl+f start */
$("#searchStudent").on("keyup", function() {
var value = $(this).val();
console.log(value);
$("table tbody tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
/* Search Student like ctrl+f end*/
Here is the source from where i have tried:
Source JS

i have modified your js fiddle code now it working jsfiddle.net/rFGWZ/3406/
$("#search").on("keyup", function() {
var value = $(this).val();
if(value!='') {
$("table tbody tr").hide();
}else{
$("table tbody tr").show();
}
$('table tbody tr td:contains("'+value+'")').parent('tr').show();
});

Basically your code is working but it is not picking up elements inside your tag
try adding the following:
var id2 = $row.find("b:first").text();
and changing this:
if (id2.indexOf(value) !== 0) {
Then search based on the bold content and it should work
You could try it like this and search on each part individually:
$id = $row.find("td:first");
var id2 = $id.find("b:first").text();
var id3 = $id.find("p:first").text();
if (id2.indexOf(value) !== 0 && id3.indexOf(value) !== 0) {

$("#searchStudent").on("keyup", function() {
var value = $(this).val();
if(value!='') {
$("table tbody tr").hide();
}else{
$("table tbody tr").show();
}
$('table tbody tr td:contains("'+value+'")').parent('tr').show();
});
I have resolved with this help.

Get values by class

I tried for hours but could not find any solution.
Simplified my code looks like following.
PHP :
foreach($db->query("SELECT id FROM news ORDER BY position ASC") as $row)
{
...
<input type="text" class="_title" >
Search: <input type="file" class="_file" >
<input type='button' class="_submit" value='Save' >
...
}
?>
JS :
$(document).ready(function(){
$("._submit").click(function(){
?? var _title = document.getElementById('_title'),
?? _file = document.getElementById('_file');
var data = new FormData();
data.append('SelectedFile', _file.files[0]);
data.append('title', _title.value);
...
</script>
I don't know how to get the data by class. By ID it is working, but i can't use IDs, because there would be several same IDs because of the foreach loop.
Tried this as well without success:
var _file = document.getElementsByClassName('_file');
I hope somebody can help me.
Misch

You can wrap your elements in container div like
<?php
foreach($db->query("SELECT id FROM news ORDER BY position ASC") as $row)
{
...
<div class='container'>
<input type="text" class="_title" >
Search: <input type="file" class="_file" >
<input type='button' class="_submit" value='Save' >
</div>
}
?>
Then use .closest() to traverse up the container. After wards you simply use find to get the desired elements.
<script>
$(document).ready(function(){
$("._submit").click(function(){
var container = $(this).closest('.container');
var _title = container.find('._title'),
var _file = container.find('._file')[0];
var data = new FormData();
data.append('SelectedFile', _file.files[0]);
data.append('title', _title.value);
//Rest of your code
});
});
</script>

Since you're using jquery you could use .each() function and class selector . to loop through all the element with same class :
$('.class').each(function(){
var input_value = $(this).val();
})
Since you have more than one field with class _title and _file you should pass them as array to Formdata() using array signs [] :
var data = new FormData();
$('._file').each(function(){
var _file = $(this).val();
data.append('SelectedFile[]', _file.files[0]);
})
$('._title').each(function(){
var _title = $(this).val();
data.append('title[]', _title);
})
Hope this helps.

One more thing you can do a bit same as #satpal
Wrap your code in a div element.
PHP:
foreach($db->query("SELECT id FROM news ORDER BY position ASC") as $row)
{
...
<div> <!-- wrapper -->
<input type="text" class="_title" >
Search: <input type="file" class="_file" >
<input type='button' class="_submit" value='Save' >
</div>
}
?>
Then try following code.
JS:
$("._submit").click(function(){
var title = $(this).siblings('._title').val();
var file = $(this).siblings('._file')[0].files[0];
var data = new FormData();
data.append('SelectedFile',file);
data.append('title', title);
});
The above code makes use of .siblings() function

get multiple checked value in javascript/jquery

I have status id defined in my div tag which is present in a phtml file .Now, I need to fetch its value into the seprate javascript file.
I have use jquery push method for this.
Code in phtml file :
<table class="abc">
<tbody id="checkboxes">
<tr class="r<?php echo $item['id']; ?><?php echo ($item['status_low']?' status-low':''); ?>">
<td><input type="checkbox" name="item" class="row" statusid="<?php echo $item['status_id']; ?>"</td>
<td><?php echo $item['id']; ?></td>
<td><?php echo $item['title']; ?></td>
</tr>
</tbody>
</table>
Code in Javascript File :
var selected = [];
$('#checkboxes input:checked').each(function() {
if ($(this).checked) {
selected.push($(this).attr('statusid'));
}
});
console.log(selected);
When I print selected array, I get a blank output .
Can anyone tell me where am I going wrong ?

Just remove your if condition like bellow. Your selector is just for selected checkboxes, So you don't need that if anyway.
$('#checkboxes input:checked').each(function() {
selected.push($(this).attr('statusid'));
});
DEMO

Try this :-
var selected = [];
$("input[type='checkbox']").each(function(){
if($(this).is(':checked'))
{
selected.push($(this).attr('statusid'));
}
});
OR
var selected = [];
$("#checkboxes input[type='checkbox']").each(function(){
if($(this).is(':checked'))
{
selected.push($(this).attr('statusid'));
}
});
OR
var selected = [];
$("#checkboxes input[type='checkbox']:checked").each(function(){
selected.push($(this).attr('statusid'));
});

Change your JQuery code like this,
$('#checkboxes input:checked')
to
$("#checkboxes input[type='checked']")
your code is:::
var selected = [];
$("#checkboxes input[type='checked']").each(function() {
selected.push($(this).attr('statusid'));
});
console.log(selected);

"#checkboxes input:checked" selector already selecting checked checkboxes so you don't need to check if checkbox is checked or not. See here http://api.jquery.com/checked-selector/
var selected = $.map('#checkboxes input:checked',function(ck,i){
return $(ck).attr('statusid');
})

You could try this one
var selected = $('#checkboxes input:checkbox:checked.row').map(function () {
var cbId = this.id;
return cbId;
}).get();

Using $('selector').each() to modify and update html of DOM elements?

I am trying to create an event listener across a bunch of links on my site. These links are generated within a loop, so I end up with <a class = "replyButton" id = "replyID"<? echo $x; ?> etc.
I'm trying to use the code below to reveal an input box when each respective link is clicked, but with no luck. I can get it to work using plain JS too, in one case, but not using JQuery, extrapolated across several like this. Any help would be really awesome.
window.onload = function(){
$('.replyButton').each(function(index){
var domElementId = "replyArea" + index;
domElementId.onclick = function() {
var replyFieldHtml = '<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>';
document.getElementById('domElementId').innerHTML = replyFieldHtml;
console.log('domElementId');
return false;
}
});
}
Edit: here is the loop im using to generate the html...
$x = 0;
while ($x < 8){
$x++;
$r = $wallarray - $x;
$postContent = $wall_content['wall_posts'][$x-1];
$postUser = getUserNameById($wall_content['userID'][$x-1]);
?>
<div class = "row">
<div class = "span6">
<div class = "span1" id = "wallPhoto"><img src ="assets/img/usr/profile_holder.jpg></div>
<div class = "span4">
<div class = "span4" id = "wallFeedStyle"><a id = "wallUserLink" href = "#"><b><? echo $postUser; ?></b></a></div>
<div class = "row">
<div class = "span5">
<div class = "span4" id = "userPost"><? echo $postContent; ?></br><p class = "wallsmall"></i>Like ·<a class = "replyButton" id = "replyButton<? echo $x; ?>" href="#"></i>Reply</a></p></div></div>
</div>
<div class = "row">
<div class = "span5">
</div>
</div>
<div class = "row" id = "replyArea<? echo $x; ?>"></div>
</div>
<?
}
?>

You're using the variable in the wrong manner. Try this:
window.onload = function () {
$('.replyButton').each(function (index) {
var domElementId = "replyArea" + index;
$('#' + domElementId).on('click', function () {
var replyFieldHtml = '<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>';
$(this).html(replyFieldHtml);
console.log(domElementId);
return false;
});
});
}

I ended up using the code below to solve this one, after digging deeper into the history behind .on() and .bind(). Thanks for all your help!
$('a.replyButton').on("click", function(){
var index = $(this).attr('id');
$('#replyArea'+index).html('<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>');
});
I ended up changing the "replyLink" ID attribute to just the number. So there were a bunch of /<.a> with class replyButton, and ID attributes as a number. And it seems to do the job nicely, no need to setup the .each() loop too.