Radio Button Changes What's In the Textarea

theChronic · 07-11-2007, 11:02 PM

sup folks
I was wondering how I can go about changing what is in a text area or any sort of text box by selecting different radio buttons.

thnx

Costin Trifan · 07-12-2007, 03:08 AM

Hi, John!

You can do that in many ways, depending on what technology you're using.
All you have to do is to get and display the data you need in the textbox or in the textarea whenever the state of the radio button is changed or you can use a javascript script and change the text accordingly.

theChronic · 07-12-2007, 01:56 PM

ok, i made some progress - i am looking for this exact thing, however, I need two of them on the same page

http://www.w3schools.com/js/tryit.as...yjs_form_radio

I tried playing around with the code and having two forms and a script for each one, changing "answer" so there are two unique ones (an "answer" and an "answer2")

It just ends up messing things up

Does anyone know how I can code two or more of those on the same page?

thnx

Costin Trifan · 07-13-2007, 01:10 AM

Code:

<head>
    <script type="text/javascript">
function check(browser)
{
  document.getElementById("answer").value = browser
}
    </script>

</head>
<body>
    <form id="AppMainForm">
        <div>
            <input onclick="check(this.value)" type="radio" value="Internet Explorer" name="browser" />Internet
            Explorer<br />
            <input onclick="check(this.value)" type="radio" value="Firefox" name="browser" />Firefox<br />
            <input onclick="check(this.value)" type="radio" value="Netscape" name="browser" />Netscape<br />
            <input onclick="check(this.value)" type="radio" value="Opera" name="browser" />Opera<br />
            <br />
            Your favorite browser is:
            <input id="answer" />
        </div>
    </form>
</body>

hth

theChronic · 07-15-2007, 12:07 PM

Isn't that the same as what was on the page I linked to ya?

What I'm trying to do is get two sets of the radio buttons & input. Any ideas on how to do this?

I tried this, but if you test it using the link below you will see how it doesn't work:

Code:

	
<script type="text/javascript">
function check(browser)
  {
  document.getElementById("answer").value=browser
  }
</script>
<form id="Main">
        <input name="snetwork" type="radio" onclick="check(this.value)" value="Op 1">
        Op 1<br />
        <input type="radio" name="snetwork" onclick="check(this.value)" value="Op 2">
        Op 2<br />
        <input type="radio" name="snetwork" onclick="check(this.value)" value="Op 3">
        Op 3<br />
<br />
Code: <input type="text" onclick="this.select();" id="answer" size="20">
</form>

<script type="text/javascript">
function check(browser)
  {
  document.getElementById("answer2").value=browser
  }
</script>
      <form id="Second">
        <input name="snetwork2" type="radio" onclick="check(this.value)" value="Op 4">
        Op 4<br />
        <input type="radio" name="snetwork2" onclick="check(this.value)" value="Op 5">
        Op 5<br />
        <input type="radio" name="snetwork2" onclick="check(this.value)" value="Op 6">
        Op 6<br />
<br />
Code: <input type="text" onclick="this.select();" id="answer2" size="20">
</form>

thanks

Costin Trifan · 07-15-2007, 01:52 PM

Create a different function for each form.

Code:

    <form id="Main">
<script type="text/javascript">
function checkFirst(browser)
{
    document.getElementById("answer1").value=browser;
}
</script>

        <input name="snetwork" type="radio" onclick="checkFirst(this.value)" value="Op 1" />
        Op 1<br />
        <input type="radio" name="snetwork" onclick="checkFirst(this.value)" value="Op 2" />
        Op 2<br />
        <input type="radio" name="snetwork" onclick="checkFirst(this.value)" value="Op 3" />
        Op 3<br />
        <br />
        Code:
        <input type="text" onclick="this.select();" id="answer1" size="20" />
    </form>


    <form id="Second">

<script type="text/javascript">
function checkSecond(browser)
{
    document.getElementById("answer2").value=browser;
}
</script>

        <input name="snetwork2" type="radio" onclick="checkSecond(this.value)" value="Op 4" />
        Op 4<br />
        <input type="radio" name="snetwork2" onclick="checkSecond(this.value)" value="Op 5" />
        Op 5<br />
        <input type="radio" name="snetwork2" onclick="checkSecond(this.value)" value="Op 6" />
        Op 6<br />
        <br />
        Code:
        <input type="text" onclick="this.select();" id="answer2" size="20" />
    </form>

Delar · 11-02-2007, 07:18 AM

Could someone tell me what I'm doing wrong with this or if this can not be done?

Code:


<script type="text/javascript">
function check(browser)
  {
	var answer1;
	var answer2;
	document.getElementById("answer1").value=browser;
	answer2 = answer1;
  }
</script>

<form>
<input type="radio" name="browser" onclick="check(this.value)" value="A">A<br />
<input type="radio" name="browser" onclick="check(this.value)" value="B">B<br />
<input type="radio" name="browser" onclick="check(this.value)" value="C">C<br />
<input type="radio" name="browser" onclick="check(this.value)" value="D">D<br />
<br />

<P><TEXTAREA ONCLICK="this.select();" NAME="answer1" COLS="40" ROWS="10" WRAP="physical"></TEXTAREA></P>
<P><TEXTAREA ONCLICK="this.select();" NAME="answer2" COLS="40" ROWS="10" WRAP="physical"></TEXTAREA></P>

</form>

When I select the radio button the answer1 is updated correctly but answer2 does not.

Costin Trifan · 11-02-2007, 09:28 AM

Code:

<head>
    <title>Update textareas</title>

<script type="text/javascript">
function check(browser)
  {
         // Set a referrence to the objects (textarea).
	var answer1 = document.getElementById("answer1");
	var answer2 = document.getElementById("answer2");

	// Modify the value from the first textarea
	// whenever a radio button was checked.
	answer1.value = browser;
	
	// Update the second textarea with the value
	// found in the first textarea.
	answer2.value = answer1.value;
  }
</script>
</head>
<body>
<form>
<input type="radio" name="browser" onclick="check(this.value)" value="A" />A<br />
<input type="radio" name="browser" onclick="check(this.value)" value="B" />B<br />
<input type="radio" name="browser" onclick="check(this.value)" value="C" />C<br />
<input type="radio" name="browser" onclick="check(this.value)" value="D" />D<br />
<br />

<p><textarea onclick="this.select();" name="answer1" cols="40" rows="10" wrap="physical"></textarea></p>
<p><textarea onclick="this.select();" name="answer2" cols="40" rows="10" wrap="physical"></textarea></p>

</form>
</body>

Now, both of your textareas will update their content.
hope this helps.

Delar · 11-02-2007, 10:37 AM

Yes it does thank you!