/    Sign up×
Community /Pin to ProfileBookmark

Checkbox Fill Textfield on Click

Copy linkTweet thisAlerts:
Apr 18.2008

I have tried several different thing and cant get anything to work. What i have is 12 checkboxes, and when someone clicks on one of those boxes, it puts a value into a textfield that displays to the user. How can I accomplish this?

Thanks

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 18.2008 — Explain fully.

Is the field initially hidden?

Is there a field for each checkbox?

Where does the value come from?
Copy linkTweet thisAlerts:
@Ay__351_eApr 18.2008 — 
<script type="text/javascript">

function getVal(bu){
var el=document.getElementById('inp0');
var i=0, c;
while(c=document.getElementById('chk'+(i++))) {
el.value=(bu.checked)? bu.value : null;
c!=bu? c.checked =false : null;
}
}

</script>
<body>
<input type="checkbox" name="chk" value="0" id="chk0" onclick="getVal(this)">
<input type="checkbox" name="chk" value="1" id="chk1" onclick="getVal(this)">
<input type="checkbox" name="chk" value="2" id="chk2" onclick="getVal(this)">
<input type="checkbox" name="chk" value="3" id="chk3" onclick="getVal(this)">
<input type="checkbox" name="chk" value="4" id="chk4" onclick="getVal(this)">
<input type="checkbox" name="chk" value="5" id="chk5" onclick="getVal(this)">
<input type="checkbox" name="chk" value="6" id="chk6" onclick="getVal(this)">
<input type="checkbox" name="chk" value="7" id="chk7" onclick="getVal(this)">
<input type="checkbox" name="chk" value="8" id="chk8" onclick="getVal(this)">
<input type="checkbox" name="chk" value="9" id="chk9" onclick="getVal(this)">
<input type="checkbox" name="chk" value="10" id="chk10" onclick="getVal(this)">
<input type="checkbox" name="chk" value="11" id="chk11" onclick="getVal(this)">
<br>
<input type="text" name="inp" id="inp0">
Copy linkTweet thisAlerts:
@josephs8authorApr 18.2008 — Thanks for your help, but I need to insert multiple values, so they can click more then one, so like it would be 1,2,3,4 and when they click unclick it, it would remove it from that list. Thanks so much!!!
Copy linkTweet thisAlerts:
@josephs8authorApr 18.2008 — Something Like This, Like I was saying as you would click it would add that value to the text box, and then when you uncheck it would be removed. Thanks for everyones help thus far.

http://img183.imageshack.us/img183/1730/41718134tv5.jpg
Copy linkTweet thisAlerts:
@Orc_ScorcherApr 18.2008 — <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function () {
dojo.connect(dojo.byId("container"), "onclick",
function () {
dojo.byId("output").value = dojo.map(
dojo.filter(
dojo.query("#container [type='checkbox']"),
"return item.checked"
),
"return item.value"
)
}
)
})

</script>


<div id="container">
<input type="checkbox" value="0">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
<input type="checkbox" value="4">
<input type="checkbox" value="5">
<input type="checkbox" value="6">
<input type="checkbox" value="7">
<input type="checkbox" value="8">
<input type="checkbox" value="9">
<input type="checkbox" value="10">
<input type="checkbox" value="11">
<input type="text" id="output">
</div>
Copy linkTweet thisAlerts:
@josephs8authorApr 18.2008 — Thanks alot works great!!!
Copy linkTweet thisAlerts:
@Ay__351_eApr 18.2008 — 
<script type="text/javascript">

function getVal(){
var el=document.getElementById('inp0');
var i=0, c, arr=[];
while(c=document.getElementById('chk'+(i++))) c.checked? arr[arr.length]=c.value : null;
el.value = arr.join(",");
}
</script>
<body>
<input type="checkbox" name="chk" value="0" id="chk0" onclick="getVal()">value 0<br>
<input type="checkbox" name="chk" value="1" id="chk1" onclick="getVal()">value 1<br>
<input type="checkbox" name="chk" value="2" id="chk2" onclick="getVal()">value 2<br>
<input type="checkbox" name="chk" value="3" id="chk3" onclick="getVal()">value 3<br>
<input type="checkbox" name="chk" value="4" id="chk4" onclick="getVal()">value 4<br>
<input type="checkbox" name="chk" value="5" id="chk5" onclick="getVal()">value 5<br>
<input type="checkbox" name="chk" value="6" id="chk6" onclick="getVal()">value 6<br>
<input type="checkbox" name="chk" value="7" id="chk7" onclick="getVal()">value 7<br>
<input type="checkbox" name="chk" value="8" id="chk8" onclick="getVal()">value 8<br>
<input type="checkbox" name="chk" value="9" id="chk9" onclick="getVal()">value 9<br>
<input type="checkbox" name="chk" value="10" id="chk10" onclick="getVal()">value 10<br>
<input type="checkbox" name="chk" value="11" id="chk11" onclick="getVal()">value 11<br>
<br>
<input type="text" name="inp" id="inp0">

Copy linkTweet thisAlerts:
@josephs8authorApr 18.2008 — One more question Ayse how would I give the output box say a default value of id?=

Thanks again ?
Copy linkTweet thisAlerts:
@Ay__351_eApr 18.2008 — josephs,

I did not understant what you wanted.

c.checked? arr[arr.length]=c.[color=red]defaultValue[/color] : null;

or

c.checked? arr[arr.length]=c.[color=red]getAttribute('id')[/color] : null;
Copy linkTweet thisAlerts:
@josephs8authorApr 18.2008 — well i want the default value to id?= and then it would add the numbers after that so it would be in the textbox id?=3,5,7 when they clicked on 3 5 7 checkboxes. Sorry I shouldn't have been so vagued. Thanks
Copy linkTweet thisAlerts:
@josephs8authorApr 18.2008 — Would I use one of those, if so where do i need to add it. Thanks
×

Success!

Help @josephs8 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...