I have pretty much copied and pasted from this Stackoverflow question/answer, and it doesn't seem to want to work on my page. I also tried creating a blank PHP page to try it on, and it still doesn't work.
Also the jQuery library that I included in the header was one off Google's library, and also jQuery's official one: .
It has to be something with the encoding or something because the code works fine in my browser on JSFiddle also:
Here is the code I'm using personally:
<input id="dam" type="text" />
<div id="dam_return">
<a href="#">DLH Victoria</a>
<a href="#">DLH Sam</a>
<a href="#">Studly</a>
</div>
and the Javascript:
$('#dam_return a').click(function() {
var value = $(this).html();
var input = $('#dam');
input.val(value);
return false;
});
If anyone could help me out that would be awesome!
EDIT: I'm thinking my problem is because of a SQL query that happens everytime a key is pressed on the "dam" input.
Here is the EXACT SQL query that happens:
<div id="dam_return_search"><a href="#">Maybe this one works? (but no, it doesn't)</a><br />
<?php
$connect = // blahblahaa
if (isset($_GET['dam_text'])) {
getSuggest($text);
}
function getSuggest($text) {
$dam = $_GET['dam_text'];
$sqlCommand = "SELECT `name` FROM `alpacas1` WHERE `name` LIKE '%$dam%'";
$query = mysql_query($sqlCommand);
$result_count = mysql_num_rows($query);
while ($row = mysql_fetch_assoc($query)) {
echo '<a href=#>'.$row['name'].'</a><br />';
}
}
?>
</div>
Here is the DAM input box and code associated with it:
<script type="text/javascript">
function suggest1() {
var dam_text = document.getElementById('dam').value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('MicrosoftXMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('dam_return').innerHTML = xmlhttp.responseText;
}
}
var target = 'dam_search.php?dam_text=' + dam_text;
xmlhttp.open('GET', target, true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#dam_return_search a").click(function(){
var value = $(this).html();
var input = $('#dam');
input.val(value);
});
});
</script>
<tr>
<td id="label">Dam:</td>
<td id="option">
<input type="text" name="dam" id="dam" value="<?php echo "$dam"; ?>" onkeyup="suggest1();"><br />
<div id="dam_return"></div>
</td>
</tr>
3 Answers
You need the DOM of the page to fully load before initiating a .click() event listener. You can do that using $(document).ready().
Here is a JSFiddle of it.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dam_return a").click(function(){
var value = $(this).html();
var input = $('#dam');
input.val(value);
});
});
</script>
<input id="dam" type="text" />
<div id="dam_return">
<a href="#" class="test">DLH Victoria</a>
<a href="#" class="test">DLH Sam</a>
<a href="#" class="test">Studly</a>
</div>
well i think that you should consider using this code, frankly i think that you should not be using the .html() jquery method to grab text, you should use the text() method, i tried this code offline and online, it works
and please use preventDefault() method to stop an event, rather than return false
$(document).ready(function () {
$('.tags_select a').click(function(evt) {
var value = $(this).text();
var input = $('#text_tag_input');
input.val(input.val() + value);
evt.preventDefault();
});
});
also you can read about the difference between return false and preventDefault() here
Instead of having Javascript in the initial file change the input box "dam" I changed it so that the dam_search.php file changed it "onclick".
Here is the code I had:
<div id="dam_return_search"><a href="#">Maybe this one works? (but no, it doesn't)</a><br />
<?php
$connect = // blahblahaa
if (isset($_GET['dam_text'])) {
getSuggest($text);
}
function getSuggest($text) {
$dam = $_GET['dam_text'];
$sqlCommand = "SELECT `name` FROM `alpacas1` WHERE `name` LIKE '%$dam%'";
$query = mysql_query($sqlCommand);
$result_count = mysql_num_rows($query);
while ($row = mysql_fetch_assoc($query)) {
echo '<a href=#>'.$row['name'].'</a><br />';
}
}
?>
</div>
Here is what I changed it to:
<?php
$connect = // blahblahaa
if (isset($_GET['dam_text'])) {
getSuggest($text);
}
function getSuggest($text) {
$dam = $_GET['dam_text'];
$sqlCommand = "SELECT `name` FROM `alpacas1` WHERE `name` LIKE '%$dam%'";
$query = mysql_query($sqlCommand);
$result_count = mysql_num_rows($query);
while ($row = mysql_fetch_assoc($query)) {
echo '<a href=# onclick="document.getElementById(\'dam\').value=\''.$row['name'].'\';">'.$row['name'].'</a><br />';
}
}
?>
</div>
