Remove From My Forums

Using Javascript to Change a Radio Button's label (value) with a button click

Question
0

Sign in to vote

User1465740667 posted

My personal project (not college related) is to program a Multiple Choice Quiz web page. I am using Visual Studio 2010 ASP.net to perform this task. My dilemma is that I cannot, for the life of me, figure out how to change the (text) in my radio buttons labels upon button click. I have three Radio Buttons for the User to choose the correct answer from and have been successful (thanks to a moderator in a forum) in changing the text in the first Radio Button but cannot get the other two to change text. I have, unsuccessfully, tried every angle I could possibly imagine to tweak the code (for hours and hours - day after day - although I must admit I enjoyed the challenge) and that is why I am here. Can anyone assist me please.

This is what I have:

<!DOCTYPE html PUBLIC "">

<html xmlns="">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Multiple Choice Quiz</title>

/*** Begin Style the Header ***/
/*** End Style the Header ***/

/*** Begin Style the Top Nav Bar ***/
/*** End Style the Top Nav Bar ***/

/*** Begin Image with Transparent Text ***/
/*** End Image with Transparent Text***/

</head>

<body runat="server" id="Body1">

<form id="Form1" method="post" runat="server">











<div class="container">

<img src="Images/forest.jpg" alt="forest" style="width:100%;">

<div class="content">

<h1 id = "queue" style = "font-size: 15px; font-family: 'Segoe UI'">Question Queue</h1>

<h2 id = "question" style = "font-size: 20px; font-family: 'Charm'">Question Presented Here!</h2>



<asp:RadioButtonList id="RadioButtonList1" runat="server">
<asp:listitem Value="1">Item 1</asp:listitem>
<asp:listitem Value="2">Item 2</asp:listitem>
<asp:listitem Value="3">Item 3</asp:listitem>
</asp:RadioButtonList>





<input type="button" onclick="JavaScript: buttonOnClick(0);" value="Change Radio Button #1 Text">

<br />

<asp:Button ID="Button1" runat="server" Text="Start Quiz" OnClientClick="return Click()" Visible="True" />



</div>

<script type="text/javascript">

function buttonOnClick(radioButtonNumber) {
var elementRef = document.getElementById('<%= RadioButtonList1.ClientID %>');
var radioButtonListArray = elementRef.getElementsByTagName('input');

for (var i = 0; i < radioButtonListArray.length; i++) {
var radioButtonRef = radioButtonListArray[i];
if (i == radioButtonNumber) {
var labelArray = radioButtonRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
labelArray[0].innerHTML = 'CHANGED TEXT';
break;
}
}
}
}
</script>

</div>
</form>
</body>
</html>

Thursday, May 13, 2021 12:17 AM

All replies

User1535942433 posted

Hi williamcarowick,

According to your description,you have passed 0 to the function. So it will show label in the first radion button Whatever you choose.

So,I suggest you need to check the radion button checked property.Just like this:

 <script type="text/javascript">
                    function buttonOnClick(radioButtonNumber) {
                        var elementRef = document.getElementById('<%= RadioButtonList1.ClientID %>');
                        var radioButtonListArray = elementRef.getElementsByTagName('input');
                        for (var i = 0; i < radioButtonListArray.length; i++) {
                            if (radioButtonListArray[i].checked) {
                                var labelArray = radioButtonListArray[i].parentNode.getElementsByTagName('label');
                                if (labelArray.length > 0) {
                                    labelArray[0].innerHTML = 'CHANGED TEXT';
                                    break;
                                }
                            }
                        }
                    }
                </script>

Result:

Best regards,

Yijing Sun

Thursday, May 13, 2021 5:48 AM

0

Sign in to vote

User1465740667 posted

Hello Yijing Sun:

I had sent you a reply earlier but my mail said that it failed to deliver it. Go figure that one. Anyway, I made your suggested change to my code and upon running the change (debug) nothing happened. None of the radio button values changed. Thanks for your response - it is appreciated. I am still working on getting those Radio Button arrays to change on button click. If you have any further suggestions please let me know. Again, Thanks for your response.

William Carowick

Thursday, May 13, 2021 8:57 AM
0

Sign in to vote

User1535942433 posted

Hi williamcarowick,

You could post your any question, codes or result in the forums. Do you have errors when running the project?

I suggest you could do like this:

1.Run your project.

2.Press F12. In the panel pop up,you could select sources. And you could see your page and javascript source.

3.Break point the lines of javascript.

4.Select the radion button and click the button. It will run your javascript source and you could press F11 to continue.

5.You could check what's wrong step by step.

Best regards,

Yijing Sun

Thursday, May 13, 2021 9:28 AM
0

Sign in to vote

User1465740667 posted

Hello Yijing Sun:

In response to your email to me - No I have not resolved the problem.

However, I have made some significant progress by my numerous "tweaks" that I have performed on the original code.

IN THE "FOR" AND "IF" STATEMENT:

If I change the "if statement" from (i==0) to (i==1) it will change the existing text in radio button label 2 to "Changed First Label. That is not the correct change I want but at least it moved it to the 2nd radio button label. It will also move it to the 3rd label by changing the if statement to (i==2). But again it still says Changed First Label. So at least I have found out how to move the text to the different labels. Now I need to find out how to get all three labels to change to their correct"text change" on the button click.

for example:

function buttonOnClick(radioButtonNumber) {
var elementRef = document.getElementById('<%= RadioButtonList1.ClientID %>');
var radioButtonListArray = elementRef.getElementsByTagName('input');

for (var i = 0; i < radioButtonListArray.length; i++) {
var radioButtonRef = radioButtonListArray[i];
if (i == 0) {
var labelArray = radioButtonRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
labelArray[0].innerHTML = 'Changed first label';
labelArray[1].innerHTML = 'Changed Second label';
labelArray[2].innerHTML = 'Changed Third label';
break;

<input type="button" onclick="JavaScript: buttonOnClick(0);" value="Change RadioButton #1 Text">

Thank you for your response. You mentioned in the email that if I was still having problems that I could "post" to the forum. I thought I had already done that and I have been waiting for some responses from others as well but have not received any. You are the only one that has responded to my posting.

Again, Thanks.

William Carowick

Wednesday, May 19, 2021 4:26 AM

User1535942433 posted

Hi williamcarowick,

 <script type="text/javascript">
                    var ones = ['first', 'Second', 'Third'];
                    function buttonOnClick(radioButtonNumber) {
                        var elementRef = document.getElementById('<%= RadioButtonList1.ClientID %>');
                        var radioButtonListArray = elementRef.getElementsByTagName('input');
                        for (var i = 0; i < radioButtonListArray.length; i++) {
                            if (radioButtonListArray[i].checked) {
                                var labelArray = radioButtonListArray[i].parentNode.getElementsByTagName('label');
                                if (labelArray.length > 0) {
                                    labelArray[0].innerHTML = 'Changed'+''+ ones[i] +''+'label';
                                    break;
                                }
                            }
                        }
                    }
                </script>

Best regards,

Yijing Sun

Wednesday, May 19, 2021 6:37 AM

0

Sign in to vote
User1465740667 posted

Hello Yijing Sun:

You have done "EXCELLENT" work on the code. Your code has made it possible to change the text on all three radio button labels. However, for the text to change the user must first select (click) the radio button and then when submitted by the button the change takes place. I love that you have been able to get the text to change (and I can certainly use it on another feature in my program) but what I need is for the text to change without first clicking the radio button. I need it to happen upon the button click without the radio button click (check).

The reasoning for this need is:

This program is a trivia quiz
clicking the button (submit) will automatically "LOAD" the next question and answer selection into the same labels as the previous question and answer selection.

Thank you for your contribution. Your continued editing would be greatly appreciated.

Thanks,

William Carowick
Monday, May 24, 2021 1:38 PM
0

Sign in to vote

User1535942433 posted

Hi williamcarowick,

According to your description, I'm guessing that you want to change the text of each label when you change the radion button instead of clicking the button.

You need to add change function on the radio button instead of the input button.

Best regards,

Yijing Sun

Tuesday, May 25, 2021 7:36 AM
0

Sign in to vote

User1465740667 posted

Hello Yijing Sun:

Thank you for the advice. I will certainly research that and give it a try.

Sincerely,

William Carowick

Wednesday, May 26, 2021 2:04 AM
0

Sign in to vote

User1535942433 posted

Hi williamcarowick,

If you still have problems,you could post to us.And if you have solved,you could mark these helpful to you.

Best regards,

Yijing Sun

Wednesday, May 26, 2021 7:43 AM
0

Sign in to vote

User1465740667 posted

Hello Yijing Sun:

I have went a complete different route and have been successful in getting my questions and answers into my .container and .content div's.

I want to thank you for all your help. I would like to mark this post as helpful to me but don't know how to do it. Please advise.

ALSO: Can you provide me with any help in "Preventing a POSTBACK upon closing an alert?"

Since my website is a Bible Trivia website I wish to present a "Scripture Reference" with each Question. I have a button which does this.

var a4 = ["<button class=buttons002 onclick=myFunction1() run at=server;return false; OnClientClick=myFunction1() run at=server;return false;>Scripture Reference</button>",

This button raises an alert which provides the Scripture Reference for this particular question.

function myFunction1() {
alert("Scripture is presented here. [Genesis 6:11-18]");
return false

HOWEVER, when the user closes the alert, the closure does a POSTBACK which brings it back to the beginning of the quiz and the user has to start the quiz all over again. As you can see I have already tried several attempts to prevent the postback but they are unsuccessful.

Thanks

William Carowick

Sunday, May 30, 2021 11:00 PM
0

Sign in to vote

User1535942433 posted

Hi williamcarowick,

williamcarowick

I have went a complete different route and have been successful in getting my questions and answers into my .container and .content div's.

I want to thank you for all your help. I would like to mark this post as helpful to me but don't know how to do it. Please advise.

There is a tag of "Mark as Answer" .

williamcarowick

Since my website is a Bible Trivia website I wish to present a "Scripture Reference" with each Question. I have a button which does this.

var a4 = ["<button class=buttons002 onclick=myFunction1() run at=server;return false; OnClientClick=myFunction1() run at=server;return false;>Scripture Reference</button>",

This button raises an alert which provides the Scripture Reference for this particular question.

function myFunction1() {
alert("Scripture is presented here. [Genesis 6:11-18]");
return false

HOWEVER, when the user closes the alert, the closure does a POSTBACK which brings it back to the beginning of the quiz and the user has to start the quiz all over again. As you can see I have already tried several attempts to prevent the postback but they are unsuccessful.

About the problem,I have followed you.You could try that.

https://forums.asp.net/t/2177089.aspx

Best regards,

Yijing Sun

Monday, May 31, 2021 9:27 AM
0

Sign in to vote

User276797048 posted

@yij sun.aspx Thanks, you are genius.

Friday, June 18, 2021 9:30 AM

Asked by:

Using Javascript to Change a Radio Button's label (value) with a button click

Question

All replies

williamcarowick

williamcarowick