Jump to content

JS for radio button TEXT content


phppup

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.

Link to comment
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.)

 

Link to comment
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>

 

Link to comment
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?

 

Link to comment
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?

Link to comment
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.

Link to comment
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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

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.