|
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
| ||||||||||||||||||||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
JavaScript - Trouble with text manipulation
Hello
I don't understand why I am having this trouble. I have tried many variations, but to no avail. The objective here is to change some displayed text based on radio button selection. My function script currently reads: Code:
<script language="JavaScript" type="text/javascript">
function a10892F() {
var MugSelect = document.getElementById('MugSelect').value;
var choice1 = "glass";
var choice2 = "deco";
if (MugSelect == choice1)
{
document.getElementById('a10892').innerHTML = 'Text to display if glass is chosen';
}
else if (MugSelect == choice2)
{
document.getElementById('a10892').innerHTML = 'text for display if deco was the choice';
}
else
{
document.getElementById('a10892').innerHTML = 'Default text for any other choice';
}
}
</script>
The radio buttons: Code:
<input name="MugSelect" type="radio" value="deco" id="MugSelect" onclick='a10892F()' /> <input name="MugSelect" type="radio" value="18oz" id="MugSelect" onclick='a10892F()' /> <input name="MugSelect" type="radio" value="glass" id="MugSelect" onclick='a10892F()' /> <input name="MugSelect" type="radio" value="15oz" id="MugSelect" onclick='a10892F()' /> <input name="MugSelect" type="radio" value="22oz" id="MugSelect" onclick='a10892F()' /> Changing text section: Code:
<div align="center" id="a10892">This is the text I want to change based on the radio selection</div> I get no errors, and the script is being read, but it seems the conditions are being ignored. If I select "deco" in the radio buttons, my expectation is the script would halt as soon as the "else if (MugSelect == choice2)" is seen as true. But it doesn't, it executes through to the final "else" regardless, and displays that message. Can some one please show me what I am doing wrong here? Many thanks Elso |
|
#2
|
||||
|
||||
|
Hi,
Welcome to the forums. I dont think that you can access the value property in that way, you need to cycle through all of the radio buttons testing each of them to find the selected one, you can then reference its property using its subscript. Heres an example: Code:
<html>
<script language="JavaScript" type="text/javascript">
function a10892F() {
var rad_val = "";
for (var i=0; i < document.myForm.MugSelect.length; i++)
{
if (document.myForm.MugSelect[i].checked)
{
rad_val = document.myForm.MugSelect[i].value;
}
}
switch(rad_val)
{
case 'glass':
document.getElementById('a10892').innerText = 'Text to display if glass is chosen';
break;
case 'deco':
document.getElementById('a10892').innerText = 'text for display if deco was the choice';
break;
default:
document.getElementById('a10892').innerText = 'Default text for any other choice';
break;
}
}
</script>
<body>
<form name="myForm" action="" method="post">
<input name="MugSelect" type="radio" value="deco" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="18oz" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="glass" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="15oz" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="22oz" id="MugSelect" onclick='a10892F()' />
<div align="center" id="a10892">This is the text I want to change based on the radio selection</div>
</form>
</body>
</html>
|
![]() |
| Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > JavaScript - Trouble with text manipulation |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|