Jump to content
phppup

JS for radio button TEXT content

Recommended Posts

My research has proven that this is not as common as I thought, so I need some help, please.

I have included code and do NOT want the VALUE of the readio displayed, but rather the inner HTML or textContent (as I have seen if referred as)

<form name="form">

<b>What do you like best?</b><br>
<input type="radio" name="group1" value="mommy" checked> i want to see this: mommy hands<br>
<input type="radio" name="group1" value="toys"> i want to see this: toys and talking<br>
<input type="radio" name="group1" value="monkeys"> i want to see this: monkeys and tigers<br>
<input type="Button" onClick="whichButton()" value="What did you check?">
</form>

<script language="JavaScript" type="text/javascript">

function whichButton() {
var group1Checked 

	for (var i=0; i<document.form.group1.length; i++) {
	
		if (document.form.group1[i].checked) {
     //group1Checked = document.form.group1[i].value;    //This worked, but provides VALUE element NOT the TEXT that is desired
		group1Checked = document.form.group1[i].textContent();
		}
		
	}
	
	if(group1Checked){ //if(group1Check) is just saying, "if group1Checked does not equal null"
	alert("I like " + group1Checked + " best.")
	}
	else{
	alert("You did not make a selection.")
	}
}

	</script>

And, I am only interested in displaying the ONE single selected radio button that is checked.

Thank you.

Share this post


Link to post
Share on other sites

Inputs do not have innerHTML or textContent, they have values.

If you only show the selected one, how can anyone select one of the others?

Share this post


Link to post
Share on other sites

I may be using the wrong terminology, but I want to get to the text that is visible next to the actual radio button that would be selected.

I want the confirmation ALERT to confirm which radio was selected by repeating the same text that is on screen (regardless of the value).

I've seen it accomplished. 

{I think I used .parentNode.textContent and got close, but it was not achieving the desired goal.)

 

Share this post


Link to post
Share on other sites

I would put the text in an attribute on the input, like

<input type="radio" name="group1" value="mommy" checked data-title="i want to see this: mommy hands"> i want to see this: mommy hands

because I think what you need to do is slightly different from what you're trying to do.

There's also aria-labelledby.

For getting text on a label, use a <label> as the parentNode.

<label><input type="radio" name="group1" value="mommy" checked> i want to see this: mommy hands</label>

If the text isn't next to the radio button in the markup then use aria-labelledby and a <label> like

<input id="group1_mommy" type="radio" name="group1" value="mommy" checked aria-labelledby="group1_mommy_label">
<label id="group1_mommy_label" for="group1_mommy">i want to see this: mommy hands</label>

 

Share this post


Link to post
Share on other sites

I think I'm liking the label option.  It seems more efficient, especially since I was planning to add a <label for> to extend mouse focal area. (Does this sound reasonable?)

 

How would I adapt my JavaScript [shown above] after this modification?

 

Share this post


Link to post
Share on other sites

You can search the document for the corresponding label using

document.querySelector("label[for='" + this.id + "']")

 

Share this post


Link to post
Share on other sites

Edited my code as suggested but no luck.

<form name="form">

<b>What do you like best?</b><br>
<input type="radio" name="group1" id="male" value="mommy" checked>  <label for="male">i want to see this: mommy hands</label><br>
<input type="radio" name="group1" id="female" value="toys">  <label for="female">i want to see this: toys and talking</label><br>
<input type="radio" name="group1" id="other" value="monkeys">  <label for="other">i want to see this: monkeys and tigers</label><br>
<input type="Button" onClick="whichButton()" value="What did you check?">
</form>

<script language="JavaScript" type="text/javascript">

function whichButton() {
var group1Checked 

	for (var i=0; i<document.form.group1.length; i++) {
	
		if (document.form.group1[i].checked) {
     //group1Checked = document.form.group1[i].value;    //This worked, but provides VALUE element NOT the TEXT that is desired
	 //	group1Checked = document.form.group1[i].textContent();
          	group1Checked = document.querySelector("label[for='" + this.id + "']")
		}
		
	}
	
	if(group1Checked){ //if(group1Check) is just saying, "if group1Checked does not equal null"
	alert("I like " + group1Checked + " best.")
	}
	else{
	alert("You did not make a selection.")
	}
}

	</script>

Any suggestions?

Share this post


Link to post
Share on other sites

Start by understanding what the code I posted is supposed to do. Then you need to change one place in it so that it works for you. Then you need to use it correctly.

Share this post


Link to post
Share on other sites

If I could have, I would have, but I didn't because I needed assistance.

That's why I posted in the first place.

Share this post


Link to post
Share on other sites

Made several adjustments but don't seem to be hitting the mark.

<form name="form">

<b>What do you like best?</b><br>
<input type="radio" name="group1" id="male" value="mommy" checked>  <label for="male">i want to see this: mommy hands</label><br>
<input type="radio" name="group1" id="female" value="toys">  <label for="female">i want to see this: toys and talking</label><br>
<input type="radio" name="group1" id="other" value="monkeys">  <label for="other">i want to see this: monkeys and tigers</label><br>
<input type="Button" onClick="whichButton()" value="What did you check?">
</form>

<script language="JavaScript" type="text/javascript">

function whichButton() {
var group1Checked 

	for (var i=0; i<document.form.group1.length; i++) {
	
		if (document.form.group1[i].checked) {
     //group1Checked = document.form.group1[i].value;    //This worked, but provides VALUE element NOT the TEXT that is desired
	 //	group1Checked = document.form.group1[i].textContent();
          	group1Checked = document.querySelector("label[for='" + this.id + "']")
		}
		
	}
	
	if(group1Checked){ //if(group1Check) is just saying, "if group1Checked does not equal null"
	alert("I like " + this.id + " best.")
	}
	else{
	alert("You did not make a selection.")
	}
}

	</script>

Can anyone get this to run so that it delivers the label TEXT in the alert?

Currently, I get "You did not make a selection" even though choices are picked.

Share this post


Link to post
Share on other sites

Have you tried outputting this.id? It doesn't contain what you expect. You need to extract the ID from the HTML element.

Hint: the following code gives you an HTML element:

document.form.group1[i]

The properties available through that element are described in the manual here:
https://developer.mozilla.org/en-US/docs/Web/API/Element

Hint: you're looking for "id"

Side note: I would recommend looking into using console.log() instead of alert(). The function outputs the information to your browser's web console instead of potentially bombarding you with alert boxes that you manually need to close. More information can be found here:
https://developer.mozilla.org/en-US/docs/Web/API/Console/log

Edited by cyberRobot
formatting

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.