HTML form data retrieve using javascript

Javascript data retrieve from HTML Form:
Js:
function display(){ var fname=document.forms['myForm']['fname'].value; document.getElementById('demoName').innerHTML=fname; var gender=document.forms['myForm']['gender'].value; document.getElementById('demoGender').innerHTML=gender; var hobb=document.forms[0]; var hob =""; for(i=0; i<hobb.length;i++){ if(hobb[i].checked){ hob=hob+hobb[i].value+", "; } } document.getElementById('demoGHobby').innerHTML=hob; var en=document.forms[1]; var entry =""; for(i=0; i<en.length;i++){ if(en[i].checked){ entry=entry+en[i].value+", "; } } document.getElementById('demoEntry').innerHTML=entry; }
HTML Form:
<form name="myForm"> Name: <input type="text" id="fname"/> gender:male <input type="radio" name="gender" value="m"/> Female<input type="radio" name="gender" value="f"/> Unknown: <input type="radio" name="gender" value="u"/> Hobby: <input type="checkbox" name="hobby" value="reading"/>reading <input type="checkbox" name="hobby" value="writing"/>writing <input type="checkbox" name="hobby" value="dancing"/> dancing Entry: <input type="checkbox" name="entry" value="boy"/>boy <input type="checkbox" name="entry" value="girl"/>girl <input type="checkbox" name="entry" value="old"/>old </form> <button type="submit" onClick="display()">Submit</button> <p id="demoName"></p><br/> <p id="demoGender"></p><br/> <p id="demoGHobby"></p><br/> <p id="demoEntry"></p><br/>