This is the current code I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body>
<a href="">Active</a>
<a href="">Inactive</a>
<a href="">Banned</a>
<input type="text">
</body>
</html>
What I want to do is when I click on active, the textbox will have the word active and so on. Is there a way to do this?
You can do this using jquery:
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
var text = $(this).text();
$('input[type=text]').val(text);
});
});
And without JQuery just in case someone wants it : http://jsfiddle.net/s0ds5rdy/
I recommend putting "#" in the href attribute. It'll scroll to the top of the page if you don't preventDefault, while browsers might reload the page if you click on a blank link.
window.addEventListener("load", function () {
var allLinks = document.getElementsByTagName("a");
for (var i = 0; i < allLinks.length; ++i) {
allLinks[i].addEventListener("click", function (e) {
e.preventDefault();
document.querySelector('input[type=text]').value = e.target.innerHTML;
});
}
});
In pure javascript you could do this:
<body> <a href="#">Active</a> <a href="#">Inactive</a> <a href="#">Banned</a> <input id="foo" type="text"> </body>
var links = document.querySelectorAll( 'a' );
var input = document.getElementById('foo');
function setInput(event) {
event.preventDefault();
input.value = event.target.innerHTML;
};
for( var i=links.length; i--; ) {
links[i].addEventListener( 'click', setInput, false );
};