/    Sign up×
Community /Pin to ProfileBookmark

Checkboxes fill in text field

Copy linkTweet thisAlerts:
Aug 28.2012

Hi all,

Any help on this is greatly appreciated as I’m quite stuck.

I have a series of checkboxes and a series of text fields. The goal is for the user to be able to tick any combination of the boxes, and the relevant info be inserted into the text fields. However, they aren’t pairs – as the user goes through the checkboxes they may tick them in any order. So, the first box will fill the first field, the nth box will fill the second field, and so on.

Thanks in advance!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@xelawhoAug 28.2012 — and the info that goes into the field? does that depend on which box, which field, or which click number?

whichever way it's simple enough, but you need to give more detail...
Copy linkTweet thisAlerts:
@wbportAug 28.2012 — What about allowing the user to check as many boxes as needed, but then not doing anything until a button is selected? You can then interrogate the checkboxes in order.
Copy linkTweet thisAlerts:
@smattauthorAug 29.2012 — Thanks for the quick replies.

wbport: there is a tally for a cost as a result of the combination of boxes that have been selected - having to make your selection then click to 'update' the total is not as elegant as having it update with each change.

xelawho: sorry, I'll explain properly.

(this is just the model, the use case is slightly different but easier to keep it simple).

There's a column of X checkboxes. Each one is a product with a cost. The user can select any combination of products (up to a defined limit Z). Initially there's 1 text field that's blank.

A checkbox is clicked, the price is put into the empty field. Second box is clicked, a new field is added and the price goes in. So on and so on. If a user unselects a box, that field is removed. Ideally if unselecting everything will go back to initial state with 1 empty field.

The adding/removing fields is icing if it's not overly complex as I'm quite happy to just have all the input fields there at the beginning but empty, but it would make it look that little bit more elegant.

I hope that makes it more clear. Appreciate this raises quite a few 'why...' questions - the use case does make sense, but it's somewhat more complex and doesn't contribute anything relevant as to what I'm trying to do.

As before, any help is greatly appreciated - I'm slowly getting my head around javascript but it's slow process!
Copy linkTweet thisAlerts:
@xelawhoAug 29.2012 — see if this is what you're talking about and then we can do the hide/show routine:
[CODE]
<body>

5: <input type="checkbox" value="5" onchange="fillBox(this)"/><input type="text" class="subs"/><br>
7: <input type="checkbox" value="7" onchange="fillBox(this)"/><input type="text" class="subs"/><br>
9: <input type="checkbox" value="9" onchange="fillBox(this)"/><input type="text" class="subs"/><br>
11: <input type="checkbox" value="11" onchange="fillBox(this)"/><input type="text" class="subs"/><br>
Total:<input type="text" id="tot"/>
<script type="text/javascript">

function fillBox(box) {
var total=0;
box.nextElementSibling.value=box.checked?box.value:"";
var flds=document.getElementsByTagName("input");
for ( var x = 0; x < flds.length; x++ ) {
if (flds[x].className=="subs"){
total+=Number(flds[x].value);
}
}
document.getElementById("tot").value=total;
}

</script>
</body>
[/CODE]
Copy linkTweet thisAlerts:
@xelawhoAug 29.2012 — or (without the messy inline event handlers)

[CODE]
<body>

5: <input type="checkbox" value="5" /><input type="text" class="subs"/><br>
7: <input type="checkbox" value="7" /><input type="text" class="subs"/><br>
9: <input type="checkbox" value="9" /><input type="text" class="subs"/><br>
11: <input type="checkbox" value="11" /><input type="text" class="subs"/><br>
Total:<input type="text" id="tot"/>
<script type="text/javascript">
var total=0;
var flds=document.getElementsByTagName("input");
for ( var x = 0; x < flds.length; x++ ) {
if (flds[x].type=="checkbox"){
flds[x].onchange= function(){
var txt=this.nextElementSibling;
if (this.checked){
total+=Number(this.value);
txt.value=this.value
} else {
total-=Number(this.value);
txt.value="";
}
document.getElementById("tot").value=total;
}
}
}

</script>
</body>
[/CODE]
×

Success!

Help @smatt 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 5.4,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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