'View selected values of a form

I'm trying to view the value selected in a radio button. The form is:

<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>

The problem is in my JavaScript code:

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);  

}

What I want is to view the values of sistema operativo fieldset. You can choose only one. When I select it, I don't view anything. When I select the other one, that is a checkbox, I can view the values. I want to create an h2 html tag and to print the values.

How can I do it?

javascripthtmlformsdom-events


Solution 1:[1]

At first you write:

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

That would give you a single element (uno solo), if there was any. But in your code, I can see that you have elements with the class soperativo, not an id soperativo.

Use this instead of the line above:

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

Solution 2:[2]

I know that it's a pure Javascript question.. but how you didn't specified in the question that you want the solution in pure Javascript, here is my solution in jQuery:

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

http://jsfiddle.net/h9GJa/

More more easy, don't you think?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mavrosxristoforos
Solution 2 Andre Figueiredo

Related Questions