JavaScript Forum

**oreoT** · 06-07-2005, 09:28 AM

Hi there!

I need some help with something I'm doing, and I hope there's any talented people out there that can help me.

What i'm trying to do is this:

I have one text field "A".
I have 3 radio buttons "1", "2", "3"
I have 3 more text fields "B", "C", "D"

If radio button 1 is checked I want B = A
If radio button 2 is checked I want C = A
If radio button 3 is checked I want D = A

Also these values should update as soon as the user enters a different value in field A.
So if you change the value in A form 0 to 6 and radio button 1 is checked, the value in B should change to 6...

I don't know if this is easy to do or hard, but I just couldn't get it right.
I'll be thankfull for any replies.

**Phaedrus** · 06-07-2005, 06:58 PM

HTML Code:

<html>
<head>
    <script language="javascript">
    	function changeVal()
    	{
    		for (i=0;i<document.forms[0].length;i++)
    		{
				if (document.forms[0].elements[i].checked == true)
				{
					i++;
					document.forms[0].elements[i].value = document.getElementById("A").value;
					break;	
				}
    		}
    	}
    </script>
</head>
<body>
<form name="form1">

<input type="text" name="A" id="A" onKeyUp="changeVal();" />  <br /><br /><br />

<input type="radio" 
       name="rad" 
       value="1" 
       onclick="document.getElementById('B').value=document.getElementById('A').value;" /> 
	
	<input type="text" name="B" id="B" /> <br /><br />

<input type="radio" 
       name="rad" 
       value="2" 
       onclick="document.getElementById('C').value=document.getElementById('A').value;" /> 

	<input type="text" name="C" id="C" /> <br /><br />

<input type="radio" 
       name="rad" 
       value="3" 
       onclick="document.getElementById('D').value=document.getElementById('A').value;" /> 
       
	<input type="text" name="D" id="D" /> <br /><br />

</form>
</body>
</html>

**oreoT** · 06-07-2005, 07:27 PM

Thanks man!

Is it also possible to make the values go back to 0 if you choose another radio.

**Phaedrus** · 06-07-2005, 07:36 PM

Sure, no problem:

HTML Code:

<html>
<head>
    <script language="javascript">
    	function changeVal()
    	{
    		for (i=0;i<document.forms[0].length;i++)
    		{
				if (document.forms[0].elements[i].checked == true)
				{
					i++;
					document.forms[0].elements[i].value = document.getElementById("A").value;
					break;	
				}
    		}
    	}
    	
    	var strB = "document.getElementById('C').value='';document.getElementById('D').value='';";
    	    strB+= "document.getElementById('B').value=document.getElementById('A').value;";
    	var strC = "document.getElementById('B').value='';document.getElementById('D').value='';";
    	    strC+= "document.getElementById('C').value=document.getElementById('A').value;";
    	var strD = "document.getElementById('B').value='';document.getElementById('C').value='';";
    	    strD+= "document.getElementById('D').value=document.getElementById('A').value;";
    </script>
</head>
<body>
<form name="form1">

<input type="text" name="A" id="A" onKeyUp="changeVal();" />  <br /><br /><br />

<input type="radio" 
       name="rad" 
       value="1" 
       onclick="eval(strB);" /> 
	
	<input type="text" name="B" id="B" /> <br /><br />

<input type="radio" 
       name="rad" 
       value="2" 
       onclick="eval(strC);" /> 

	<input type="text" name="C" id="C" /> <br /><br />

<input type="radio" 
       name="rad" 
       value="3" 
       onclick="eval(strD);" /> 
       
	<input type="text" name="D" id="D" /> <br /><br />

</form>
</body>
</html>