Text box dependant on value of other box with javascript

**Legs** · 04-05-2012 09:26 AM

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

**xelawho** · 04-05-2012 09:41 AM

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)?

**Legs** · 04-06-2012 02:34 AM

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>

**007Julien** · 04-06-2012 02:54 AM

There is only one element with the name total (which is not the id total) !

**Legs** · 04-06-2012 03:53 AM

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?

**007Julien** · 04-06-2012 05:03 AM

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.

**Legs** · 04-06-2012 05:16 AM

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?

**xelawho** · 04-06-2012 11:40 AM

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: Text box dependant on value of other box with javascript

Thread Tools

Display

Text box dependant on value of other box with javascript

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions