www.webdeveloper.com
Results 1 to 8 of 8

Thread: Text box dependant on value of other box with javascript

  1. #1
    Join Date
    Apr 2012
    Posts
    9

    Text box dependant on value of other box with javascript

    Hi everyone

    I have a query that may be extremely easy to solve but may be impossible.

    I am trying to fill a text box with a value that is dependant on another text box.

    I have checkboxes and am using a script that adds up the values in a text box (text box will show 3 if 3 boxes are checked.) What I would like to do is have another text box auto fill that with something dependant on what is in the first box.

    For example is the value in one text box is 0 – 3 another box will show “Apple”, if it is 4 – 6 “Orange”, 7 – 10 “Pineapple” and so on.

    Is this something that can be done?

    Many thanks

    Legs

  2. #2
    Join Date
    Nov 2010
    Posts
    1,082
    hi Legs,

    to save us from having to reinvent the wheel, can you show us the code that you have already (or a simplified version if you'd rather not divulge)?

  3. #3
    Join Date
    Apr 2012
    Posts
    9
    Below if the code i am using. I cannot get to my computer righ now with the full source but this is what i am working on.

    HTML Code:
    <html>
    <head>
    <script language="javascript">
    total = 0;
    
    function calculateTotal(thisCheckbox){
    	if (thisCheckbox.checked)
    	{
    		total += parseFloat(thisCheckbox.value);
    	} else {
    		total -= parseFloat(thisCheckbox.value);
    	}
    	document.getElementById("total").value = total;
    }
    </script>
    
    </head>
    <body>
    <input type="checkbox" name="t1" value="1" onclick="calculateTotal(this);"> 1 <br>
    <input type="checkbox" name="t2" value="1" onclick="calculateTotal(this);"> 2 <br>
    <input type="checkbox" name="t3" value="1" onclick="calculateTotal(this);"> 3 <br>
    <input type="text" name="total" readonly>
    </body>
    </html>
    Last edited by Legs; 04-06-2012 at 02:38 AM.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    There is only one element with the name total (which is not the id total) !

  5. #5
    Join Date
    Apr 2012
    Posts
    9
    My secret shame is revealed, I know nothing about javascript  I friend wrote this for me as my expertise lie elsewhere. Is there a better way to achieve this?

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    A simple id is enough, the name could be useful for the submission of the form (with two form tags : <form> ... </form>).
    Code:
    <input type="text" name="total" id="total" readonly>
    With a name for the form (<form name="formName">) you could too use a document.formName.total.value to set the result.
    Last edited by 007Julien; 04-06-2012 at 05:10 AM.

  7. #7
    Join Date
    Apr 2012
    Posts
    9
    Its obvious now, didnt even spot that, i was looking at the script too much! Do you have any idea about filling a text box using the total box?

  8. #8
    Join Date
    Nov 2010
    Posts
    1,082
    I don't really understand what you're trying to do, but maybe this is a start:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    total = 0;
    
    function calculateTotal(thisCheckbox){
    	if (thisCheckbox.checked)	{
    		total++;
    	} else {
    		total--;
    	}
    	document.getElementById("thetotal").value = total;
    	if(total==1){
    	var str="Apple";
    	}else if(total>1&&total<3){
    	var str="Orange";
    	}else if(total>2){
    	var str="Pineapple";
    	} else{
    	var str="";
    	}
    	document.getElementById("thefruit").value =str;
    }
    </script>
    
    </head>
    <body>
    <input type="checkbox" name="t1" value="1" onclick="calculateTotal(this);"> 1 <br>
    <input type="checkbox" name="t2" value="1" onclick="calculateTotal(this);"> 2 <br>
    <input type="checkbox" name="t3" value="1" onclick="calculateTotal(this);"> 3 <br>
    <input type="text" id="thetotal" readonly>
    <input type="text" id="thefruit" readonly>
    </body>
    </html>

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