listing words in a textbox using checkboxes

[Gary]

Hello,
Is it possible to dynamically update a textbox with words chosen from a
list using form checkboxes and javascript?
Gary

 

[Ivo]

Hello,
Is it possible to dynamically update a textbox with words chosen from a
list using form checkboxes and javascript?
Gary

I 'm not sure I understand what you want. The following would add (or
remove) the words to the output in the order the checkboxes are clicked. It
is not the only possibility.
<script type="text/javascript">
function listwords(c,n) {
s=document.f.out.value;
if (c.checked) {
if (s.indexOf(n)<0) s+=' '+n;
} else {
s=document.f.out.value.replace(' '+n,'');
}
document.f.out.value=s;
}
</script>
<form name="f" method="get" onsubmit="return false">
<input type="text" value="" name="out"><br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Word')">Word<br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Type')">Type<br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Other')">Other<br>
</form>

 

[Gary]

I 'm not sure I understand what you want. The following would add (or
remove) the words to the output in the order the checkboxes are
clicked. It is not the only possibility.
<script type="text/javascript">
function listwords(c,n) {
s=document.f.out.value;
if (c.checked) {
if (s.indexOf(n)<0) s+=' '+n;
} else {
s=document.f.out.value.replace(' '+n,'');
}
document.f.out.value=s;
}
</script>
<form name="f" method="get" onsubmit="return false">
<input type="text" value="" name="out"><br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Word')">Word<br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Type')">Type<br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Other')">Other<br>
</form>

Ivo,
That's exactly what I wanted! Thank-you for time and effort. I googled for
hours and couldn't find anything remotely related and you mention other
possibilities?
Thanks again!
Gary

 

[Gary]

I 'm not sure I understand what you want. The following would add (or
remove) the words to the output in the order the checkboxes are
clicked. It is not the only possibility.
<script type="text/javascript">
function listwords(c,n) {
s=document.f.out.value;
if (c.checked) {
if (s.indexOf(n)<0) s+=' '+n;
} else {
s=document.f.out.value.replace(' '+n,'');
}
document.f.out.value=s;
}
</script>
<form name="f" method="get" onsubmit="return false">
<input type="text" value="" name="out"><br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Word')">Word<br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Type')">Type<br>
<input type="checkbox" name="check1"
onclick="listwords(this,'Other')">Other<br>
</form>

Would it be to much of a bother to ask how I can extend that script one
further? Say I wanted to take a second list of words and only allow the
option of inserting one word from that list in front of the list of words
inserted into the textbox using radio buttons ?
Gary

 

[Ivo]

Would it be to much of a bother to ask how I can extend that script one
further? Say I wanted to take a second list of words and only allow the
option of inserting one word from that list in front of the list of words
inserted into the textbox using radio buttons ?
Gary

It 's isn't getting any clearer what you are after, but this does as
requested. In the current design, all words have to be unique. I don't know
if that is a problem. and you need to specify the words in an array at the
start of the script, a bit clumsy. But with that, all that was needed was to
add two short "for" loops, the first removing anything like a radio'ed word,
the second adding the currently selected word. The process could be repeated
for other groups of words.

<script type="text/javascript">
var oneOf=new Array('One','Word','Only');
function listwords(c) {n=c.value;
s=document.f.out.value;
for(i=0;i<oneOf.length;i++) s=s.replace(' '+oneOf,'');
for(i=0;i<document.f.radio1.length;i++) {
a=document.f.radio1; if(a.checked)s+=' '+a.value;
}
if (c.checked) {
if (s.indexOf(n)<0) s+=' '+n;
} else {
s=document.f.out.value.replace(' '+n,'');
}
document.f.out.value=s;
}
</script>
<form name="f" method="get" onsubmit="return false">
<input type="text" value="" name="out"><br>
<input type="checkbox" name="check1" value="More"
onclick="listwords(this)">More<br>
<input type="checkbox" name="check2" value="Than"
onclick="listwords(this)">Than<br>
<input type="checkbox" name="check3" value="Before"
onclick="listwords(this)">Before<br>

<input type="radio" name="radio1" value="One"
onclick="listwords(this)">One<br>
<input type="radio" name="radio1" value="Word"
onclick="listwords(this)">Word<br>
<input type="radio" name="radio1" value="Only"
onclick="listwords(this)">Only<br>

</form>

 

[Gary]

It 's isn't getting any clearer what you are after, but this does as
requested. In the current design, all words have to be unique. I
don't know if that is a problem. and you need to specify the words in
an array at the start of the script, a bit clumsy. But with that, all
that was needed was to add two short "for" loops, the first removing
anything like a radio'ed word, the second adding the currently
selected word. The process could be repeated for other groups of
words.

Ivo,
That is one nice revision! I don't think I expressed my needs as well as I
might have, but hopefully I will be able to modify the script without the
need to pester here. Thanks again for your help!
Gary

 

[Gary]

Would it be to much of a bother to ask how I can extend that script
one further? Say I wanted to take a second list of words and only
allow the option of inserting one word from that list in front of
the list of words inserted into the textbox using radio buttons ?
Gary

It 's isn't getting any clearer what you are after, but this does as
requested. In the current design, all words have to be unique. I
don't know if that is a problem. and you need to specify the words in
an array at the start of the script, a bit clumsy. But with that, all
that was needed was to add two short "for" loops, the first removing
anything like a radio'ed word, the second adding the currently
selected word. The process could be repeated for other groups of
words.

<script type="text/javascript">
var oneOf=new Array('One','Word','Only');
function listwords(c) {n=c.value;
s=document.f.out.value;
for(i=0;i<oneOf.length;i++) s=s.replace(' '+oneOf,'');
for(i=0;i<document.f.radio1.length;i++) {
a=document.f.radio1; if(a.checked)s+=' '+a.value;
}
if (c.checked) {
if (s.indexOf(n)<0) s+=' '+n;
} else {
s=document.f.out.value.replace(' '+n,'');
}
document.f.out.value=s;
}
</script>
<form name="f" method="get" onsubmit="return false">
<input type="text" value="" name="out"><br>
<input type="checkbox" name="check1" value="More"
onclick="listwords(this)">More<br>
<input type="checkbox" name="check2" value="Than"
onclick="listwords(this)">Than<br>
<input type="checkbox" name="check3" value="Before"
onclick="listwords(this)">Before<br>

<input type="radio" name="radio1" value="One"
onclick="listwords(this)">One<br>
<input type="radio" name="radio1" value="Word"
onclick="listwords(this)">Word<br>
<input type="radio" name="radio1" value="Only"
onclick="listwords(this)">Only<br>

</form>

Ivo,
It doesn't look like that will work for me after all, if I haven't worn out
my welcome would it be possible for you to show me how I can "surround" the
list of words created from the checkboxes with "predefined" text selected
with radio buttons? i.e.:

words selected with checkboxes = one, two, three

<text from radio1 here>one, two, three</end text from radio1>
or
<text from radio2 here>one,two,three</end text from radio2>
Thanks in advance
Gary

 

[Ivo]

would it be possible for you to show me how I can "surround" the
list of words created from the checkboxes with "predefined" text selected
with radio buttons? i.e.:

words selected with checkboxes = one, two, three

<text from radio1 here>one, two, three</end text from radio1>
or
<text from radio2 here>one,two,three</end text from radio2>

There you are: function listwords version 3.0 below is really dirty: at each
click of the mouse the contents in the output field is completely erased and
rewritten. The order in which the boxes are checked no longer counts. I hope
that doesn't hurt,
Ivo

<script type="text/javascript">
function listwords(){
s='';
for(i=0;i<document.f.elements.length;i++){
a=document.f.elements;
if(a.type=='checkbox'&&a.checked)
s+=' '+a.value;
}
for(i=0;i<document.f.radio1.length;i++){
a=document.f.radio1;
if(a.checked){
b=a.value.split('|');
s=b[0]+s+' '+b[1];
}
}
document.f.out.value=s;
}
</script>
<form name="f" method="get" onsubmit="return false">
<input type="text" value="" name="out"><br>
<input type="checkbox" name="check1" value="More"
onclick="listwords()">More<br>
<input type="checkbox" name="check2" value="Than"
onclick="listwords()">Than<br>
<input type="checkbox" name="check3" value="Before"
onclick="listwords()">Before<br>
<input type="radio" name="radio1" value="&lt;|&gt;"
onclick="listwords()">Symbol<br>
<input type="radio" name="radio1" value="alpha|omega"
onclick="listwords()">Word<br>
<input type="radio" name="radio1" value="The first|will be the last."
onclick="listwords()">Sentence<br>
</form>

 

[Gary]

There you are: function listwords version 3.0 below is really dirty:
at each click of the mouse the contents in the output field is
completely erased and rewritten. The order in which the boxes are
checked no longer counts. I hope that doesn't hurt,
Ivo

Ivo,
Sorry about the delayed response, busy day yesterday.
Version 3.0 is almost picture perfect, for two of three radio buttons it
doesn't matter if the output field is erased and rewritten but for the
third radio button I need to allow the user to type text and choose
applicable checkboxes as required without erasing the text they have already
entered. Is that possible? As you have probably figured out my javascript
skills are extremely limited and I'm glad for the help you have offered
Gary

<script type="text/javascript">
function listwords(){
s='';
for(i=0;i<document.f.elements.length;i++){
a=document.f.elements;
if(a.type=='checkbox'&&a.checked)
s+=' '+a.value;
}
for(i=0;i<document.f.radio1.length;i++){
a=document.f.radio1;
if(a.checked){
b=a.value.split('|');
s=b[0]+s+' '+b[1];
}
}
document.f.out.value=s;
}
</script>
<form name="f" method="get" onsubmit="return false">
<input type="text" value="" name="out"><br>
<input type="checkbox" name="check1" value="More"
onclick="listwords()">More<br>
<input type="checkbox" name="check2" value="Than"
onclick="listwords()">Than<br>
<input type="checkbox" name="check3" value="Before"
onclick="listwords()">Before<br>
<input type="radio" name="radio1" value="&lt;|&gt;"
onclick="listwords()">Symbol<br>
<input type="radio" name="radio1" value="alpha|omega"
onclick="listwords()">Word<br>
<input type="radio" name="radio1" value="The first|will be the last."
onclick="listwords()">Sentence<br>
</form>

 

[Gary]

I've added a function to select/deselect all checkboxes to the script below
in the form of:
function checkAll(field)
{
for (i = 0; i < field.length; i++)
field.checked = true ;
}

function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field.checked = false ;
}


<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.f.check1)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.f.check1)">

my only problem is that the list items don't show in the textbox after using
the above function until a radio button is selected again. Have I missed
something in the original javascript that I can add to the "checkAll" and
"uncheckAll" functions that will update the textbox with all items in the
list?
TIA
Gary

There you are: function listwords version 3.0 below is really dirty:
at each click of the mouse the contents in the output field is
completely erased and rewritten. The order in which the boxes are
checked no longer counts. I hope that doesn't hurt,
Ivo

Ivo,
Sorry about the delayed response, busy day yesterday.
Version 3.0 is almost picture perfect, for two of three radio buttons
it doesn't matter if the output field is erased and rewritten but
for the third radio button I need to allow the user to type text and
choose applicable checkboxes as required without erasing the text
they have already entered. Is that possible? As you have probably
figured out my javascript skills are extremely limited and I'm glad
for the help you have offered Gary

<script type="text/javascript">
function listwords(){
s='';
for(i=0;i<document.f.elements.length;i++){
a=document.f.elements;
if(a.type=='checkbox'&&a.checked)
s+=' '+a.value;
}
for(i=0;i<document.f.radio1.length;i++){
a=document.f.radio1;
if(a.checked){
b=a.value.split('|');
s=b[0]+s+' '+b[1];
}
}
document.f.out.value=s;
}
</script>
<form name="f" method="get" onsubmit="return false">
<input type="text" value="" name="out"><br>
<input type="checkbox" name="check1" value="More"
onclick="listwords()">More<br>
<input type="checkbox" name="check2" value="Than"
onclick="listwords()">Than<br>
<input type="checkbox" name="check3" value="Before"
onclick="listwords()">Before<br>
<input type="radio" name="radio1" value="&lt;|&gt;"
onclick="listwords()">Symbol<br>
<input type="radio" name="radio1" value="alpha|omega"
onclick="listwords()">Word<br>
<input type="radio" name="radio1" value="The first|will be the last."
onclick="listwords()">Sentence<br>
</form>