PDA

Click to See Complete Forum and Search --> : pass multiple checkboxes' values to the textbox

jsrookie
09-28-2003, 12:56 AM
How do I pass multiple checkboxes' values to the textbox?

For example:
If I check two checkboxes then I see the textbox shows two checkboxes' values separated by a comma like "coffee,beer".


<form name="form1">
<input type="checkbox" name="checkboxname" value="coffee">
<input type="checkbox" name="checkboxname" value="tea">
<input type="checkbox" name="checkboxname" value="beer">
<input type="checkbox" name="checkboxname" value="soda">
<input type="checkbox" name="checkboxname" value="orangejuice">
</form>

<form name="form2">
<input type="text" name="textname">
</form>

Thank you for your help.

jsrookie
Khalid Ali
09-28-2003, 09:21 AM
something like this might work for you...

<script type="text/javascript">
<!--
function setValue(val){
var frm = document.getElementById("form2");
frm.textname.value+=val+",";
}
//-->
</script>
</head>

<body class="body">
<form name="form1">
<input type="checkbox" name="checkboxname" value="coffee" onclick="setValue(this.value);">
<input type="checkbox" name="checkboxname" value="tea" onclick="setValue(this.value);">
<input type="checkbox" name="checkboxname" value="beer" onclick="setValue(this.value);">
<input type="checkbox" name="checkboxname" value="soda" onclick="setValue(this.value);">
<input type="checkbox" name="checkboxname" value="orangejuice" onclick="setValue(this.value);">
</form>

<form name="form2">
<input type="text" name="textname">
</form>

</body>
jsrookie
09-28-2003, 11:55 AM
Thank you Khalid for your help.

The forms work well now. However, when I uncheck the checked checkboxes, I still see the checkboxes' values in the textbox, which is expected to disappear.
For example:
If I check on two checkboxes, and I see in the textbox the result "coffee, beer". Now, if I uncheck one of those checked checkboxes (uncheck on the coffee checkbox for instance), I wish to see the result "beer".

Thank you again for your help.

jsrookie
Khalid Ali
09-28-2003, 12:25 PM
yes,thats because I did not implemented any more functionality in it.
read up on array functions

array.splice() etc at
devedge.netscape.net
It will help you understand what is next you need to do.
or an even simpler approach may be like this..
every time a checkbox is selected,
loop through all of the check boxes list and create a string of thos' values that are checked and then put this string in the text field.
Charles
09-28-2003, 12:30 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {margin:0ex 1ex}
-->
</style>

<script type="text/javascript">
<!--
document.write('<textarea cols="5" id="area" rows="5"></textarea>')

function updateArea (e) {
document.getElementById('area').value = '';
for (var i=0; i<e.form.elements.length; i++){if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked) {document.getElementById('area').value += e.form.elements[i].nextSibling.data; document.getElementById('area').value += '\n';}};
}
// -->
</script>

<form action="">
<div>
<label><input type="checkbox" onclick="updateArea(this)">Fee</label>
<label><input type="checkbox" onclick="updateArea(this)">Fie</label>
<label><input type="checkbox" onclick="updateArea(this)">Foe</label>
<label><input type="checkbox" onclick="updateArea(this)">Fum</label>
<button type="submit">Submit</button>
</div>
</form>
Khalid Ali
09-28-2003, 12:39 PM
since I have nothing better to do write now,here is the updated script...:-)

<script type="text/javascript">
<!--
function setValue(){
var val="";
var frm = document.getElementById("form2");
var cbs = document.getElementById("form1").checkboxname;
for(var n=0;n<cbs.length;n++){
if(cbs[n].checked){
val+=cbs[n].value+",";
}
}
var temp = val.split(",");
temp.pop();
frm.textname.value=temp
}
//-->
</script>
</head>

<body class="body">
<form name="form1">
<input type="checkbox" name="checkboxname" value="coffee" onclick="setValue();">
<input type="checkbox" name="checkboxname" value="tea" onclick="setValue();">
<input type="checkbox" name="checkboxname" value="beer" onclick="setValue();">
<input type="checkbox" name="checkboxname" value="soda" onclick="setValue();">
<input type="checkbox" name="checkboxname" value="orangejuice" onclick="setValue();">
</form>

<form name="form2">
<input type="text" name="textname">
</form>

Edit
lol I and charles posted almost at the same time..now you have 2 distinct solutions.
jsrookie
09-28-2003, 01:59 PM
Thank you Khalid and Charles so much for your help and time.

Both solutions work real well. I am able to run my template now.

jsrookie.
Khalid Ali
09-28-2003, 02:21 PM
;) you are welcome...;)