Forum Moderators: open
I suspect this is pretty easy for you pros, and I've Googled a bit to see if I could get the code, but nothing quite what was needed.
I want to have a simple text box in a form, and below that I will have the years from 1980 to 2009 as individual little text links.
The user, by clicking on whatever years are to be selected, will get them automatically pasted into the text box.
For example they might click on 4 different years, and in the text box the result would be:
2004, 2007, 2008, 2009
Simple? Would very much appreciate the code to do that, and please assume I know zero about JS - so I need it all *_*
have a look at this example, it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title></title>
<link rel="stylesheet" type="text/css" href="/">
<style type="text/css">
#list li {
width:60px;
}
.hide {
display:none;
}
.selected {
color:#f00;
}
</style><script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',displaySelection,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',displaySelection);
}
}function displaySelection(){
document.getElementById('list').className=
document.forms[0][0].className='';count=0;
years=document.getElementById('list').getElementsByTagName('li');
for(c=0;c<years.length;c++) {
years[c].onclick=function() {
if(count<4) {
[blue]
/*document.forms[0][0] refers to the first element in the first form.
If the textarea was the third element the reference would be document.forms[0][2].*/
[/blue]
if(document.forms[0][0].value.match(this.firstChild.nodeValue)){
alert('This year has already been selected.\nPlease choose another year.');
return;
}
document.forms[0][0].value+=this.firstChild.nodeValue+'\n';
this.className='selected';
}
if(count==3) {
alert('Thanks you, the selection is now completed.');
count=4;
return;
}
count++;
}
}
}
</script></head>
<body>
<ul id="list" class="hide">
<li>1980</li>
<li>1981</li>
<li>1982</li>
<li>1983</li>
<li>1984</li>
<li>1985</li>
<li>1986</li>
<li>1987</li>
<li>1988</li>
<li>1989</li>
<li>1990</li>
<li>1991</li>
<li>1992</li>
<li>1993</li>
<li>1994</li>
<li>1995</li>
<li>1996</li>
<li>1997</li>
<li>1998</li>
<li>1999</li>
<li>2000</li>
<li>2001</li>
<li>2002</li>
<li>2003</li>
<li>2004</li>
<li>2005</li>
<li>2006</li>
<li>2007</li>
<li>2008</li>
<li>2009</li>
</ul><form action="#">
<div>
<textarea class="hide" rows="5" cols="12"></textarea>
</div>
</form></body>
</html>
birdbrain
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<style type="text/css">* { margin:0; padding:0; }
body { font-size:1em; }
#outer { padding:12px; }
#yearsLinksDiv { width:230px; height:auto; border:1px solid black; padding:4px; }
.year_link { color:blue; text-decoration:underline; cursor:pointer; }
.year_link_selected { color:black; text-decoration:none; cursor:text; }
.year_link, .year_link_selected { margin:2px; font-size:0.8em; }
input { padding:0 5px; margin:3px; }</style>
<script type="text/javascript">window.onload = function () {
document.getElementById('yearsForm').reset(); //<---> note id of form
var a, i, div = document.getElementById('yearsLinksDiv'), //<---> note id of div to contain the links
startYear = 1980,
currentYear = new Date().getFullYear(); //will always be the current year, so will expand with time
for (i = startYear; i <= currentYear; i++) { //>create links and set-up onclick handlers for them,
//they will be given className of 'year_link',
//and will be changed to 'year_link_selected' when they are clicked, and will no longer work then
a = document.createElement('a');
a.href = '#';
a.innerHTML = i;
a.className = 'year_link';
a.onclick = function () {
if (this.className != 'year_link_selected') {
var elem = document.getElementById('yearsTextBox'),
ev = elem.value,
h = this.innerHTML;
this.className = 'year_link_selected';
ev += (ev.length > 0) ? ', ' + h : h;
if (ev.length > 4) {
ev = ev.split(', ').sort().join(', ');
}
elem.value = ev;
}
return false;
};
div.appendChild(a);
blank = document.createTextNode(' ');
div.appendChild(blank);
}
//below sets up an onclick handler for the reset button,
//so that the links's className's get changed back also,
//remove or comment out the below 6 lines if you don't use the reset button
document.getElementById('linksReset').onclick = function () {
var i, links = document.getElementById('yearsLinksDiv').getElementsByTagName('a'); //<---> note id of div to contain the links
for (i = 0; i < links.length; i++) {
links[i].className = 'year_link';
}
};
};</script>
</head>
<body>
<div id="outer">
<form action="" name="yearsForm" id="yearsForm">
<p><textarea name="yearsTextBox" id="yearsTextBox" rows="2" cols="30" readonly="readonly">
</textarea><br>
<input type="reset" value="Reset" id="linksReset"></p>
<div id="yearsLinksDiv"> </div>
</form>
</div>
</body>
</html>
No problem, you're very welcome. ;)
