JavaScript: how to populate radio button value and label with variable

Question

I am afraid this is a beginner's question that should have been answered already, but either it is not or I cannot articulate myself correctly... Please bear with me, I hope this has a quick solution:

I want to populate my radio buttons of my form with variables. Later I want to get the values from my google spreadsheet, but I am stuck with the variables already.

<body>
  <div>
      <h4>Main Page</h4>
        <fieldset style="background: #eceff9;"><legend style="padding: 10px;">Select Material</legend>
           <label><input type="radio" name="matPick" id="mat1"></label><br>
           <label><input type="radio" name="matPick" id="mat2" value="Material 2"> Material 2</label><br>
        </fieldset>
  </div>

(function() {
var mat1 = 'Material 1';
document.getElementById("mat1").innerHTML = mat1;
})();

I also created a fiddle.

I hope the code explains what I want to achieve, basically the html should show similar to Material 2, but created with my javascript variable.

Thanks very much for Your help! Martin

There are plenty of information in the internet, you could find answer within 5min of googling, Anyway this should help alot [Get Radio Button Value with Javascript](http://stackoverflow.com/a/9618826/2308005) — Medet Tleukabiluly, May 08 '16 at 06:01
Hi, thanks for all patient answers, I have been trying them out all evening today. @Medet, I try to assign a value to a radio button, not to read out the value. I am sure the difference is minor for a skilled programmer - well, I am afraid I am not ;-) . The Label of the button now gets displayed correctly in jsfiddle, but not in my google form. I am afraid Google sanitizes away the TextNode. Moreover, I neither can assign the VALUE to the button. Please see my fiddle for my current status of tinkering... http://jsfiddle.net/uzcd3cy2/ — Martin, May 09 '16 at 19:37
[What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers?fbclid=IwAR3tnMwVeqa2Dt4VvQE_HNQ_zgmfhK0EFDhAbLdfvW_54Msw_kwBtGRsJ-I) — Marios, Feb 06 '21 at 17:57

score 0 · Answer 1 · answered May 08 '16 at 06:02

You are trying to change the innerHTML of the input. This, of course, is invalid. You need to find the parent of the input then insert the text.

(function() {
    var mat1 = 'Material 1';
    var ele = document.getElementById("mat1").parentNode;
    ele.appendChild(document.createTextNode(mat1));
})();

score 0 · Answer 2 · answered May 08 '16 at 06:03

Try This:

<body>
      <div>
          <h4>Main Page</h4>
            <fieldset style="background: #eceff9;"><legend style="padding: 10px;">Select Material</legend>
               <input type="radio" name="matPick"><label id="mat1"></label><br>
               <label><input type="radio" name="matPick" id="mat2" value="Material 2"> Material 2</label><br>
            </fieldset>
      </div>
</body>

JavaScript: how to populate radio button value and label with variable

2 Answers2