Просмотр выбранных значений формы

Question

Я пытаюсь просмотреть значение, выбранное переключателем. Форма:

<form onsubmit="return false;"> 

<fieldset> 
<h3>Textos</h3> 
<label>Nombre:</label> 
<input type="text" name="nombre"/> 
    <label>Apellido:</label> 
    <input type="text" name="apellido" /> 
    <label>Contraseña:</label> 
    <input type="password" name="contrasena" /> 
    <div class="limpia"></div> 
</fieldset> 
<fieldset> 
<h3>Gustos musicales:</h3> 
    <label>POP <input type="checkbox" name="pop" value="POP" class="gmusicales"  
    /></label> 
    <label>ROCK <input type="checkbox" name="rock" value="ROCK" class="gmusicales" 
    /></label> 
    <label>HIP-HOP <input type="checkbox" name="hiphop" value="HIP-HOP" 
    class="gmusicales" 
    /></label> 
    <label>METAL <input type="checkbox" name="metal" value="METAL" class="gmusicales" 
    /></label> 
    <div class="limpia"></div> 
</fieldset> 
<fieldset> 
<h3>Sistema operativo</h3> 
    <label>Windows <input type="radio" name="SO" value="Windows" class="soperativo"/> 
    </label> 
    <label>Linux <input type="radio" name="SO" value="Linux" class="soperativo"/> 
    </label> 
    <label>Mac <input type="radio" name="SO" value="Mac" class="soperativo"/></label> 
    <div class="limpia"></div> 
</fieldset> 
<fieldset> 
    <input type="reset" value="Borrar"/> 
    <input type="submit" onclick=muestra() value="Probar" /> 
    <div class="limpia"></div> 
</fieldset> 

</form> 

Проблема заключается в моем яваскрипте кода:

var nom; 
var ape; 
var con; 
var gustos = document.getElementsByClassName("gmusicales"); 
var sistema = document.getElementById("soperativo"); 
var resultado; 
var i; 
var h2 = document.createElement("h2"); 

function muestra() 
{ 
nom = document.forms[0].elements.nombre.value; 
ape = document.forms[0].apellido.value; 
con = document.forms[0].contrasena.value; 
resultado = nom + " " + ape + " " + con; 

for(i=0; i<=gustos.length; i++) 
    { 
    if (gustos[i].checked) 
     { 
     resultado = resultado + " " + gustos[i].value; 
     alert(resultado); 
     } 
    } 

    for(i=0; i<=sistema.length; i++) 
    { 
    if (sistema[i].checked) 
     { 
     resultado = resultado + " " + sistema[i].value; 
     alert(resultado); 
     } 
    } 

document.body.appendChild(h2); 
document.h2.appenChild(resultado); 

} 

То, что я хочу, чтобы просмотреть значение сисьтемы Operativo полей. Вы можете выбрать только один. Когда я его выбираю, я ничего не вижу. Когда я выбираю другой, это флажок, я могу просмотреть значения. Я хочу создать тег h2 html и распечатать значения.

Как я могу это сделать?

Спасибо.

Answer 1

Сначала вы пишете:

var sistema = document.getElementById("soperativo"); 

Это даст вам один элемент (уно соло), если было. Но в вашем коде я вижу, что у вас есть элементы с классsoperativo, а не idsoperativo.

Используйте это вместо строки выше:

var sistema = document.getElementsByClassName("soperativo"); 

Answer 2

Я знаю, что это чистый Javascript вопрос .. а как вы не указали в вопросе, который вы хотите решение в чистом Javascript, здесь мое решение в JQuery:

$(document).ready(function(){ 
    $('input[type=submit]').click(function(){ 
     $('#resultado').val($('.soperativo:checked').val()); 
     return false; 
    }); 
}); 

http://jsfiddle.net/h9GJa/

Больше более легко, вы не думаете?