asked on

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;")

Michel Plungjan

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

Obadiah Christopher

@mplungjan

Is this line necessary?

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

Michel Plungjan

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

mlg101

ASKER

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.

mlg101

ASKER

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

Michel Plungjan

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

mlg101

ASKER

I tried what you put last, but it didnt work either. Do you or anyone else have an idea how to do it?

Michel Plungjan

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

mlg101

ASKER

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.

Michel Plungjan

<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

mlg101

ASKER

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

Michel Plungjan

I am in CET so time for bed. I'll look tomorrow

mlg101

ASKER

Michel Plungjan

<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

mlg101

ASKER

i get an error in the javascript code above line 8

the error: 'elements[...]' is null or not an object

mlg101

ASKER

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?

mlg101

ASKER

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

mlg101

ASKER

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

Michel Plungjan

change
(arr)
to
(arr!=null)

mlg101

ASKER

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?

mlg101

ASKER

the textboxes clear with every selection. they do not populate at all.

Michel Plungjan

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

mlg101

ASKER

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?

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mlg101

ASKER

Thank you for taking the time working through this one. Works beautifully!