www.webdeveloper.com
Results 1 to 6 of 6

Thread: Checkboxes fill in text field

  1. #1
    Join Date
    Aug 2012
    Posts
    2

    Checkboxes fill in text field

    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!

  2. #2
    Join Date
    Nov 2010
    Posts
    1,102
    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...

  3. #3
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    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.

  4. #4
    Join Date
    Aug 2012
    Posts
    2
    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!

  5. #5
    Join Date
    Nov 2010
    Posts
    1,102
    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>

  6. #6
    Join Date
    Nov 2010
    Posts
    1,102
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles