PDA

Click to See Complete Forum and Search --> : controlled forms

RavenWind
01-01-2004, 11:26 PM
Hello, I have an odd situation, and I’ve been told that Javascript has my answer. I am moderately versed in it, and have written several small scripts for my own purposes in the past. Now, I am faced with a difficult challenge, and though I have tried countless ways, I still cannot get it to work correctly. Can anyone please help me write a script?

Here is my problem. I want to make it where when radio “0” is checked, nothing happens when a button from below is clicked. But, when the user first clicks one of the other radio buttons, then clicks on a button from below, I want its value to appear in the text box beside of that button. If you cut and paste the code below and view it in a webpage, hopefully you will see what I am wanting.

All help is greatly appreciated,

Kenneth :D



<Form>
<Table Border=1>

<Tr><Td><Input Type=radio Name="selection" Value="0" Checked>0</Td>
<Td><Center>Not Selected</Center></Td>
<Tr><Td><Input Type=radio Name="selection" Value="1">1</Td>
<Td><Input Type=text Name="answer1"></Td>

<Tr><Td><Input Type=radio Name="selection" Value="2">2</Td>
<Td><Input Type=text Name="answer2"></Td>

<Tr><Td><Input Type=radio Name="selection" Value="3">3</Td>
<Td><Input Type=text Name="answer3"></Td>

</Table><P>

<Input Type=button Name="dog" Value="Dog">
<Input Type=button Name="cat" Value="Cat">
<Input Type=button Name="bird" Value="Bird">

</Form>
fredmv
01-01-2004, 11:58 PM
Welcome to the forums.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
li, td {
padding: 3px;
}

li input {
width: 100px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function processSelection(v)
{
for(var i=0; i<window.f.length; i++) if(f[i].alt == v && f[i-1].checked == true) f[i].value = v;
}

onload = function()
{
window.f = document.forms[0].elements;
for(var i=0; i<f.length; i++) if(f[i].type == 'button') f[i].onclick = function() { processSelection(this.value); }
}
//]]>
</script>
</head>
<body>
<form action="#">
<div>
<table border="1">
<tr>
<td>
<input type="radio" name="sel" id="s1" checked="checked" />
<label for="s1">0</label>
</td>
<td class="center">Not Selected</td>
</tr>
<tr>
<td>
<input type="radio" name="sel" id="s2" />
<label for="s2">1</label>
</td>
<td><input type="text" alt="Dog" /></td>
</tr>
<tr>
<td>
<input type="radio" name="sel" id="s3" />
<label for="s3">2</label>
</td>
<td><input type="text" alt="Cat" /></td>
</tr>
<tr>
<td>
<input type="radio" name="sel" id="s4" />
<label for="s4">3</label>
</td>
<td><input type="text" alt="Bird" /></td>
</tr>
</table>
<ul>
<li><input type="button" value="Dog" /></li>
<li><input type="button" value="Cat" /></li>
<li><input type="button" value="Bird" /></li>
</ul>
</div>
</form>
</body>
</html>
RavenWind
01-02-2004, 12:10 AM
Thanks! one small question now. Is it possible to make that so if there is a value in a text box, it is replaced with the new text from the button, and allow buttons to be used more than once? Again, thanks!:cool:
fredmv
01-02-2004, 12:12 AM
Originally posted by RavenWind
Thanks!You're quite welcome. ;)Originally posted by RavenWind
Is it possible to make that so if there is a value in a text box, it is replaced with the new text from the buttonI believe it does this already.Originally posted by RavenWind
and allow buttons to be used more than once?What exactly do you mean by that?
RavenWind
01-02-2004, 12:17 AM
The "Dog" button only displays dog in box 1, "Cat" in box 2, and "Bird" in 3. I would like any of the three to be able to go into any of the boxes. For example, click 3 and click dog, then click 2 and click bird, and click 1 and click bird again.

You understand my example?
Thanks for your help.
fredmv
01-02-2004, 12:26 AM
Very good explanation. ;)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
li, td {
padding: 3px;
}

li input {
width: 100px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function processSelection(v)
{
for(var i=0; i<window.f.length; i++) for(i=0; i<f.length; i++) if(f[i].checked == true) f[i+1].value = v;
}

onload = function()
{
window.f = document.forms[0].elements;
for(var i=0; i<f.length; i++) if(f[i].type == 'button') f[i].onclick = function() { processSelection(this.value); }
}
//]]>
</script>
</head>
<body>
<form action="#">
<div>
<table border="1">
<tr>
<td>
<input type="radio" name="sel" id="s1" checked="checked" />
<label for="s1">0</label>
</td>
<td class="center">Not Selected</td>
</tr>
<tr>
<td>
<input type="radio" name="sel" id="s2" />
<label for="s2">1</label>
</td>
<td><input type="text" alt="Dog" /></td>
</tr>
<tr>
<td>
<input type="radio" name="sel" id="s3" />
<label for="s3">2</label>
</td>
<td><input type="text" alt="Cat" /></td>
</tr>
<tr>
<td>
<input type="radio" name="sel" id="s4" />
<label for="s4">3</label>
</td>
<td><input type="text" alt="Bird" /></td>
</tr>
</table>
<ul>
<li><input type="button" value="Dog" /></li>
<li><input type="button" value="Cat" /></li>
<li><input type="button" value="Bird" /></li>
</ul>
</div>
</form>
</body>
</html>
RavenWind
01-02-2004, 12:33 AM
Thanks! You are a Huge help!:D
fredmv
01-02-2004, 12:39 AM
You're quite welcome. If you'd like to learn how it works or need any further help, please feel free to ask. ;)
RavenWind
01-02-2004, 12:46 AM
If you would care to explain how it works, it would be appreciated, as I was giving an example so that I might learn how it works from someone. I have a project that will use this idea, but i needed to figure out some basics. I was going to take your code and try to figure out how it works, so that I may turn it into the code for my project. So, yes, please explain, if you would. Thanks.:)