javascript onclick 用文本填充输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19342609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick fill input box with text
提问by Chad Cardiff
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.
我已经从这个 Stackoverflow 问题/答案中复制和粘贴了很多，它似乎不想在我的页面上工作。我也尝试创建一个空白的 PHP 页面来尝试它，但它仍然不起作用。
Also the jQuery library that I included in the header was one off Google's library, and also jQuery's official one: http://code.jquery.com/jquery-latest.min.js.
此外，我在标题中包含的 jQuery 库是 Google 的库之一，也是 jQuery 的官方库：http: //code.jquery.com/jquery-latest.min.js。
It has to be something with the encoding or something because the code works fine in my browser on JSFiddle also:
http://jsfiddle.net/kn3Qu/
Here is the code I'm using personally:
它必须与编码有关，或者因为代码在我的 JSFiddle 浏览器中也能正常工作：http:
//jsfiddle.net/kn3Qu/
这是我个人使用的代码：
<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:
和 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.
编辑：我认为我的问题是因为每次在“dam”输入上按下键时都会发生 SQL 查询。
Here is the EXACT SQL query that happens:
这是发生的 EXACT SQL 查询：
<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:
这是 DAM 输入框和与之相关的代码：
<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>
回答by guyzyl
You need the DOM of the page to fully load before initiating a .click() event listener. You can do that using $(document).ready().
在启动 .click() 事件侦听器之前，您需要完全加载页面的 DOM。您可以使用$(document).ready()来做到这一点。
Here is a JSFiddleof it.
这是它的一个JSFiddle。
<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>
回答by Samuel Oloruntoba
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
好吧，我认为你应该考虑使用这段代码，坦率地说，我认为你不应该使用.html()jquery 方法来抓取文本，你应该使用text()方法，我离线和在线尝试了这段代码，它有效
and please use preventDefault()method to stop an event, rather than return false
并且请使用preventDefault()方法来停止事件，而不是返回 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
您也可以在此处阅读 return false 和 preventDefault() 之间的区别
回答by Chad Cardiff
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".
我没有在初始文件中使用 Javascript 更改输入框“dam”，而是将其更改为 dam_search.php 文件将其更改为“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>
