on radiobutton click textbox mirrors another textbox

when user clicks radiobutton, I need an empty textbox to display what is in another textbox on the same page. If user clicks another radiobutton choice, then the empty textbox displays what is in a different textbox on the page. I cannot get it to work like this: Any ideas?

Checkbox1.Attributes.Add("onselect", "javascript:document.getElementById('" + NewTextBox.ClientID + "').value= ('" + TextBox1.ClientID + "').value;")

Checkbox2.Attributes.Add("onselect", "javascript:document.getElementById('" + NewTextBox.ClientID + "').value= ('" + TextBox2.ClientID + "').value;")

Checkbox3.Attributes.Add("onselect", "javascript:document.getElementById('" + NewTextBox.ClientID + "').value= ('" + TextBox3.ClientID + "').value;")

LVL 1
mlg101Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
How about



Checkbox1.Attributes.Add("onselect", "document.getElementById('" + NewTextBox.ClientID + "').value= document.getElementById('" + TextBox1.ClientID + "').value;")
 
 
In html and javascript I would do
<form>
<input type="radio" id="whatever_r1" NAME="r1" onClick="this.form['NAMEOfTextField'].value=this.form['NAMEOfTextBox1'].value" />
<input type="radio" id="whatever_r2" NAME="r1" onClick="this.form['NAMEOfTextField'].value=this.form['NAMEOfTextBox2'].value" />
<input type="radio" id="whatever_r3" NAME="r1" onClick="this.form['NAMEOfTextField'].value=this.form['NAMEOfTextBox3'].value" />
 
<input type="text" NAME="NAMEOfTextField" id="whatever_t1" value="" />
 
<input type="text" NAME="NAMEOfTextBox1" id="whatever_tA" value="" />
<input type="text" NAME="NAMEOfTextBox2" id="whatever_tB" value="" />
<input type="text" NAME="NAMEOfTextBox3" id="whatever_tC" value="" />
</form>

Open in new window

0
Obadiah ChristopherCommented:
@mplungjan

Is this line necessary?

Checkbox1.Attributes.Add("onselect", "document.getElementById('" + NewTextBox.ClientID + "').value= document.getElementById('" + TextBox1.ClientID + "').value;")
0
Michel PlungjanIT ExpertCommented:
I suggested that mlg101 put document.getElementById on BOTH parts of the script

then I showed how I would do it in HTML (and not asp) - a completely different suggestion.. Sorry if that was not clear
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

mlg101Author Commented:
Thanks for your response. I do need to stick with ASP.NET because it is a complex application with SQL database queries already written with the asp textboxes.
0
mlg101Author Commented:
oh i get it now you gave 2 possible solutions. I tried just the first thing you suggested with no luck as well. maybe I should tell you what excatly my code looks like. here goes:

Below I have 3 radio buttons and 12 textboxes. If option1 is selected, then I want Final1, Final2, Final3 and Final4 textboxes to change to the value in Pre1, Pre2, Pre3 and Pre4.
If option2 is selected I want Final1, Final2, Final3 and Final4 textboxes to change to the value in Post1, Post2, Post3, Post4.
If option3 is selected I want Final1, Final2, Final3, Final4 textboxes to clear.

Hope you can help.
<asp:RadioButton ID="Option1" runat="server"  Font-Size="X-Small" GroupName="ServedAt" Text="Address 1" />                                  <asp:RadioButton ID="Option2" runat="server" Font-Size="X-Small" GroupName="ServedAt" Text="Address 2" />                    <asp:RadioButton ID="Option3" runat="server" Font-Size="X-Small" GroupName="ServedAt" Text="New Address" />
 
<asp:TextBox ID="Final1" runat="server" ></asp:TextBox>
<asp:TextBox ID="Final2" runat="server" ></asp:TextBox>
<asp:TextBox ID="Final3" runat="server" ></asp:TextBox>
<asp:TextBox ID="Final4" runat="server" ></asp:TextBox>
 
<asp:TextBox ID="Pre1" runat="server" ></asp:TextBox>
<asp:TextBox ID="Pre2" runat="server" ></asp:TextBox>
<asp:TextBox ID="Pre3" runat="server" ></asp:TextBox>
<asp:TextBox ID="Pre4" runat="server" ></asp:TextBox>
 
<asp:TextBox ID="Post1" runat="server" ></asp:TextBox>
<asp:TextBox ID="Post2" runat="server" ></asp:TextBox>
<asp:TextBox ID="Post3" runat="server" ></asp:TextBox>
<asp:TextBox ID="Post4" runat="server" ></asp:TextBox>

Open in new window

0
Michel PlungjanIT ExpertCommented:
Sorry, I do not do asp at all

Does this work?


Checkbox1.Attributes.Add("onselect", "document.getElementById('" + NewTextBox.ClientID + "').value= document.getElementById('" + TextBox1.ClientID + "').value;")
Checkbox2.Attributes.Add("onselect", "document.getElementById('" + NewTextBox.ClientID + "').value= document.getElementById('" + TextBox2.ClientID + "').value;")
Checkbox3.Attributes.Add("onselect", "document.getElementById('" + NewTextBox.ClientID + "').value= document.getElementById('" + TextBox3.ClientID + "').value;")

Open in new window

0
mlg101Author Commented:
I tried what you put last, but it didnt work either. Do you or anyone else have an idea how to do it?
0
Michel PlungjanIT ExpertCommented:
Ok, I'll give it another try

<script type="text/javascript"> 
function setText(rad,val) {
  var theForm = rad.form;
  for (var i=1;i<=4; i++) theForm.elements["Final"+i].value = (val=='None')?'':theForm.elements[val+i].value; 
}
</script>
 
<asp:RadioButton ID="Option1" runat="server"  Font-Size="X-Small" GroupName="ServedAt" Text="Address 1"   onclick="setText(this,'Pre')" />                                  
<asp:RadioButton ID="Option2" runat="server" Font-Size="X-Small" GroupName="ServedAt" Text="Address 2"    onclick="setText(this,'Post')" />                    
<asp:RadioButton ID="Option3" runat="server" Font-Size="X-Small" GroupName="ServedAt" Text="New Address"  onclick="setText(this,'None')" />

Open in new window

0
mlg101Author Commented:
i changed the id of the textboxes to illustrate it easier. The real names are not Final1, Final2, Final3 and Final4. They are ServedAddress, ServedCity, ServedState, ServedPostalCode. How can I change the loop because they are not number sequentially (1-4)  like you thought. Sorry about the confusion.
0
Michel PlungjanIT ExpertCommented:

<script type="text/javascript"> 
var fieldNames = "ServedAddress,ServedCity,ServedState,ServedPostalCode".split(',');
function setText(rad,val) {
  var theForm = rad.form;
  for (var i=0;i<4; i++) theForm.elements[fieldNames[i]].value = (val=='None')?'':theForm.elements[val+(i+1)].value; 
}
</script>
 
<asp:RadioButton ID="Option1" runat="server"  Font-Size="X-Small" GroupName="ServedAt" Text="Address 1"   onclick="setText(this,'Pre')" />                                  
<asp:RadioButton ID="Option2" runat="server" Font-Size="X-Small" GroupName="ServedAt" Text="Address 2"    onclick="setText(this,'Post')" />                    
<asp:RadioButton ID="Option3" runat="server" Font-Size="X-Small" GroupName="ServedAt" Text="New Address"  onclick="setText(this,'None')" />

Open in new window

0
mlg101Author Commented:
I think we are close. When option1 radiobutton is selected, I need to fill servedaddress, servedcity, servedstate, servedpostalcode with: serveeaddress1, serveecity1, serveestate1, serveepostalcode1.

when option2 is selected i need to fill servedaddress, servedcity, servedstate, servedpostalcode with: serveeaddress2, serveecity2, serveestate2, serveepostalcode2.

when option3 is selected, i need to clear servedaddress, servedcity, servedstate, servedpostalcode.

serveeaddress 1 and 2, serveecity1 and 2, serveestate 1 and 2, and serveepostalcode 1 and 2, are textboxes on the same page already filled in.

Sorry for the problems
0
Michel PlungjanIT ExpertCommented:
I am in CET so time for bed. I'll look tomorrow
0
mlg101Author Commented:
ok
0
Michel PlungjanIT ExpertCommented:

<script type="text/javascript"> 
var fieldNames = "ServedAddress,ServedCity,ServedState,ServedPostalCode".split(',');
var arr1 = "ServeeAddress1,ServeeCity1,ServeeState1,ServeePostalCode1".split(',');
var arr2 = "ServeeAddress2,ServeeCity2,ServeeState2,ServeePostalCode2".split(',');
 
function setText(rad,arr) {
  var theForm = rad.form;
  for (var i=0;i<4; i++) theForm.elements[fieldNames[i]].value = (arr)?'':theForm.elements[arr[i]].value; 
}
</script>
 
<asp:RadioButton ID="Option1" runat="server"  Font-Size="X-Small" GroupName="ServedAt" Text="Address 1"   onclick="setText(this,arr1)" />                                  
<asp:RadioButton ID="Option2" runat="server" Font-Size="X-Small" GroupName="ServedAt" Text="Address 2"    onclick="setText(this,arr2)" />                    
<asp:RadioButton ID="Option3" runat="server" Font-Size="X-Small" GroupName="ServedAt" Text="New Address"  onclick="setText(this,null)" />

Open in new window

0
mlg101Author Commented:
i get an error in the javascript code above line 8

the error: 'elements[...]' is null or not an object
0
mlg101Author Commented:
ok i fixed that error by using the HTML element IDs that are rendered, for example:
ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeeAddress1.

Then i tried again, and I now only get that error when choosing option3.

When choosing option1 or option2, no error, but it doesnt work either. I does not fill servedaddress, with serveeaddress1 or serveeaddress2.

any ideas?
0
mlg101Author Commented:
here is my javascript now:
<script type="text/javascript"> 
var fieldNames = "ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_ServedAddress,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_ServedCity,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_ServedState,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_ServedPostalCode".split(',');
var arr1 = "ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeeAddress1,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeeCity1,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeeState1,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeePostalCode1".split(',');
var arr2 = "ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeeAddress2,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeeCity2,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeeState2,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_ServeePostalCode2".split(',');
 
function setText(rad,arr) {
  var theForm = rad.form;
  for (var i=0;i<4; i++) theForm.elements[fieldNames[i]].value = (arr)?'':theForm.elements[arr[i]].value; 
}
</script>

Open in new window

0
mlg101Author Commented:
ok, i tried the following code, which is different from my last post. now when i click option1 or option2, It clears out the textboxes. Option 3 still gives error: the error is: "null is null or not an object"
<script type="text/javascript"> 
var fieldNames = "ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_ServedAddress,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_ServedCity,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_ServedState,ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_ServedPostalCode".split(',');
var arr1 = "ServeeAddress1,ServeeCity1,ServeeState1,ServeePostalCode1".split(',');
var arr2 = "ServeeAddress2,ServeeCity2,ServeeState2,ServeePostalCode2".split(',');
 
function setText(rad,arr) {
  var theForm = rad.form;
  for (var i=0;i<4; i++) theForm.elements[fieldNames[i]].value = (arr)?'':theForm.elements[arr[i]].value; 
}
</script>

Open in new window

0
Michel PlungjanIT ExpertCommented:
change
(arr)
to
(arr!=null)
0
mlg101Author Commented:
ok, I moved the script to the very end of the code (at bottom of page) now it works.

the only problem is now that if I make another selection, it should hide the current selected div, and it doesn't unless I select -1 on the ddl. any ideas?

0
mlg101Author Commented:
the textboxes clear with every selection. they do not populate at all.
0
Michel PlungjanIT ExpertCommented:
Sorry. I was in too much of a hurry

Try this and I guess you need to register the script in your asp. It does not need to live at the bottom of the page in a normal situation

I am assuming the fields to copy from have the same id prefix as the field you copy to
<script type="text/javascript"> 
var id = 'ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_';
var fieldNames = "ServedAddress,ServedCity,ServedState,ServedPostalCode".split(',');
var arr1 = "ServeeAddress1,ServeeCity1,ServeeState1,ServeePostalCode1".split(',');
var arr2 = "ServeeAddress2,ServeeCity2,ServeeState2,ServeePostalCode2".split(',');
 
function setText(rad,arr) {
  var theForm = rad.form;
  for (var i=0;i<fieldNames.length; i++) {
  	var theField = theForm.elements[id+fieldNames[i]]
  	theField.value = (arr==null)?'':theForm.elements[id+arr[i]].value; 
  }
}
</script>

Open in new window

0
mlg101Author Commented:
No, they are not in the same prefix:
ServeeAddress1, ServeeCity1, ServeeState1, ServeePostalCode1, ServeeAddress2,ServeeCity2, ServeeState2, ServeePostalCode2 are 'ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_

ServedAddress, ServedCity, ServedState, ServedPostalCode are 'ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_

How do i work that in?
0
Michel PlungjanIT ExpertCommented:
have
var id = 'ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel5_';
var id1 = 'ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel4_';

and use

theField.value = (arr==null)?'':theForm.elements[id1+arr[i]].value;

or use some asp setting
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mlg101Author Commented:
Thank you for taking the time working through this one. Works beautifully!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.