Checkboxes fill in text field

**smatt** · 08-28-2012 07:05 AM

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!

**xelawho** · 08-28-2012 11:24 AM

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...

**wbport** · 08-28-2012 12:26 PM

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.

**smatt** · 08-29-2012 02:28 AM

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!

**xelawho** · 08-29-2012 08:52 AM

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>

**xelawho** · 08-29-2012 09:29 AM

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>

Thread: Checkboxes fill in text field

Thread Tools

Display

Checkboxes fill in text field

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions