-1

I want to change the text of the label which is associated with the radiobutton id="male". I have tried various ways to do it, but i can't make it work. I want to change the text "Male" in the label associated to the radio button.

  <input type="radio" name="sex" id="male" value="male">
        <label for="male">Male</label>
  </input>

 <input type="button" value="Submit" onclick = test()>

<script>

function test()
{
   var r = document.getElementById("male");
   r.nextSibling.data = "adaS";
//  r.nextSibling.nodeValue = "adaS";     // have tried all these ways
//  r.childNodes[0].value= "adaS";
//  r.childNodes[0].innerHTML= "adaS";
//   r.parentNode.childNodes[1].innerHTML= "adaS";

}

</script>

please suggest some working way to change the text "Male" in the label.

Viraj
  • 1,360
  • 3
  • 18
  • 38
Ankit Rajput
  • 1
  • 1
  • 1
  • 1

3 Answers3

1

You can use 

var r = document.getElementsByTagName("label")

to select all the label element in your page and then use 

r[0].innerHTML ="new text"

to select first label and set the text to "next text" in your test() function

Ashish Kakkad
  • 23,586
  • 12
  • 103
  • 136
AndyHu
  • 1,338
  • 2
  • 11
  • 19
  • I dont want to use geElementByTagName. I want to use the concept of "for". I have associated the label with the radio button. How do I do it that way – Ankit Rajput Aug 30 '15 at 04:27
  • You can use @ jwkicklighter's method If you insist on using "for" to select a specific tag, or you can add an id attribute to a label for simplest selection in plain JavaScript ,or Jquery. – AndyHu Aug 30 '15 at 05:03
  • thanks @AndyHu. Yes, I can access the Label using the ID and "for", but it will take long if there are many label on the page. Coz it will loop through each one of them. As the label is the child of tag, Can't i access it using the parent child method, if there's any – Ankit Rajput Aug 30 '15 at 19:33
  • tag is self closing right now so the tag is not working. You can select the label text by using document.getElementById("male").nextSibling.nextSibling.innerHTML to get access to your label's text and change it. The first "nextSibling" select the text value of input, and the next "nextSibling" select the label. – AndyHu Aug 31 '15 at 04:41
0

I tried to use ideas from the above to get a working example, and had some problems. So I asked for help in another posting and @KrishCdbry very kindly fixed the problem. The posted question is at javascript - How to dynamically change information displayed by radio button? Below is the working example with Krish's changes

 <html>
<form name="myform" onsubmit="OnSubmitForm();">
   <input type="radio" id = 'first'  name="operation" value="1"
          checked> <label for="alsoFirst"> Answer 1 </label>
   <input type="radio" id = 'second'  name="operation" value="2">
  <label for="alsoSecond">Answer 2</label>

   <p>
   <input type="submit" name="submit" value="save">
   </p>
</form>



<script type="text/javascript">
 document.addEventListener('readystatechange', function() {
  // Seems like a GOOD PRACTICE - keeps me from getting type error I was getting

    // https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object

    if (document.readyState === "complete") {
      init();
    }
  });

 function init() {

    console.log ("expect to change -Answer 1- displayed by first button to word junk");


     // this works
    var label = document.getElementsByTagName('label') [0];
    // this does not work
    label.innerHTML = 'junk';
    }

//http://www.javascript-coder.com/html-form/html-form-action.phtml
function OnSubmitForm()
{
  if(document.getElementById('first').checked == true)
    {
    alert ( "You have selected the first answer" );  
    }
  else
    if(document.getElementById('second').checked == true)
        {
        alert ( "You have selected the SECOND answer" );  
        }

  return false;
}

/*
<input type="radio" name="sex" id="male" value="male">
        <label for="male">Male</label>
  </input>

var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';

*/
//https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
</script>




</html>
Community
  • 1
  • 1
LaurelS
  • 492
  • 2
  • 8
  • 22
-1

With jQuery, $('label[for=male]').html('New Label');

Plain JS:

var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';

Can also chain that together:

var label = document.getElementById('male').getElementsByTagName('label')[0];
label.innerHTML = 'New Text;
jwkicklighter
  • 126
  • 1
  • 9
  • how to do it using JAVASCRIPT – Ankit Rajput Aug 30 '15 at 04:31
  • @AnkitRajput jQuery is just a JS library, you didn't specify that you can't use it. Just trying to help, no need for the caps. – jwkicklighter Aug 30 '15 at 04:32
  • buddy I need help. I wasn't taunting you or being rude Sorry If you felt that way. This problem is solved using Jquery everywhere. I dont know why. Its obviously easy using it. But i want to sort it using JS – Ankit Rajput Aug 30 '15 at 04:36
  • I can't test at the moment, but try the `.htmlFor` with @AndyHu's `getElementsByTagName` and a for loop on that array. – jwkicklighter Aug 30 '15 at 04:45
  • thanks @jwkicklighter. Yes, I can access the Label using the ID and "for", but it will take long if there are many label on the page. Coz it will loop through each one of them. As the label is the child of tag, Can't i access it using the parent child method, if there's any. I mean what would be the syntax for that – Ankit Rajput Aug 30 '15 at 19:34
  • @ankit-rajput update again, see if that's what you're going for. – jwkicklighter Aug 30 '15 at 19:43