JS for radio button TEXT content

[phppup]

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.

[Barand]

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?

[phppup]

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.)

 

[requinix]

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>

 

[phppup]

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?

 

[requinix]

You can search the document for the corresponding label using

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

 

[phppup]

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?

[requinix]

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.

[phppup]

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

That's why I posted in the first place.

[phppup]

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.

[cyberRobot]

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 December 21, 2018 by cyberRobot
formatting