Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

on radiobutton click textbox mirrors another textbox

Posted on 2008-11-03
25
Medium Priority
?
784 Views
Last Modified: 2010-04-21
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;")

0
Comment
Question by:mlg101
  • 14
  • 10
25 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22874177
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
 
LVL 20

Expert Comment

by:informaniac
ID: 22875150
@mplungjan

Is this line necessary?

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

Expert Comment

by:Michel Plungjan
ID: 22875621
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:mlg101
ID: 22878129
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
 
LVL 1

Author Comment

by:mlg101
ID: 22878302
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22878775
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
 
LVL 1

Author Comment

by:mlg101
ID: 22883422
I tried what you put last, but it didnt work either. Do you or anyone else have an idea how to do it?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22883592
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
 
LVL 1

Author Comment

by:mlg101
ID: 22883630
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22883675

<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
 
LVL 1

Author Comment

by:mlg101
ID: 22888808
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22889671
I am in CET so time for bed. I'll look tomorrow
0
 
LVL 1

Author Comment

by:mlg101
ID: 22893055
ok
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22893175

<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
 
LVL 1

Author Comment

by:mlg101
ID: 22897296
i get an error in the javascript code above line 8

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

Author Comment

by:mlg101
ID: 22897458
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
 
LVL 1

Author Comment

by:mlg101
ID: 22897471
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
 
LVL 1

Author Comment

by:mlg101
ID: 22897546
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22897838
change
(arr)
to
(arr!=null)
0
 
LVL 1

Author Comment

by:mlg101
ID: 22897847
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
 
LVL 1

Author Comment

by:mlg101
ID: 22901546
the textboxes clear with every selection. they do not populate at all.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22902272
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
 
LVL 1

Author Comment

by:mlg101
ID: 22905652
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 22905940
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
 
LVL 1

Author Closing Comment

by:mlg101
ID: 31512990
Thank you for taking the time working through this one. Works beautifully!
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month20 days, 15 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question