capturing values from multiple groups of radio buttons

Question

I think this one is simple but I really need some help. Thanks to anyone who helps!!

I'm trying to capture the input from two sets of radio buttons. The first group works but the second one does not.

Here's my code:

HTML

<p>Please select one from each group.</p>

<form action="#">

    <fieldset>
      <input type="radio" name="type" value="classic">classic type<br>
      <input type="radio" name="type" value="modern">modern type<br>
      <br>
      <input type="button" onclick="typeface()" value="Review type selection">
      <br><br>
      <input type="text" id="type" size="50">
    </fieldset>

    <fieldset>
      <input type="radio" name="layout" value="layout1">layout1<br>
      <input type="radio" name="layout" value="layout2">layout2<br>
      <br>
      <input type="button" onclick="layout()" value="Review layout selection">
      <br><br>
      <input type="text" id="layout" size="50">   
    </fieldset>

    <input type="submit" value="Submit">

</form>

JS (before </body> )

function typeface(){
  var type = document.forms[0].type;
  var txt = "";
  var i;
  for (i=0;i<type.length;i++){
    if (type[i].checked){
      txt = txt + type[i].value + " ";
    }
  }
  document.getElementById("type").value = "You selected: " + txt;
}

function layout(){
  var layout = document.forms[0].layout;
  var txt = "";
  var i;
  for (i=0;i<layout.length;i++){
    if (layout[i].checked){
      txt = txt + layout[i].value + " ";
    }
  }
  document.getElementById("layout").value = "You selected: " + txt;
}

Answer 1

What about not pissing off the users by confirming their radio selection, but do something like:

DEMO

HTML

<form id="myForm" action="#">

  <fieldset>
    <input type="radio" name="type" value="classic">classic type<br>
    <input type="radio" name="type" value="modern">modern type<br>
    <br>
    <input type="text" id="type" size="50">
  </fieldset>

  <fieldset>
    <input type="radio" name="layout" value="layout1">layout1<br>
    <input type="radio" name="layout" value="layout2">layout2<br>
    <br>
    <input type="text" id="layout" size="50">
  </fieldset>
  <input type="submit" value="Submit">

</form>

JS:

function getId(id){ return document.getElementById(id); }
function writeVal(){
  getId(this.name).value = "You selected: "+this.value;
}

var radio = getId('myForm').querySelectorAll('input[type=radio]');
for(var i=0; i<radio.length; i++) radio[i].onchange = writeVal;

The above will work immediately in radio change and show the selected text value in the text field.

Answer 2

I dont know exactly why but if you change the layout function name to something else it works fiddle

<input type="button" onclick="layout2()" value="Review layout selection">

function layout2()
{
...
}