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

Download Complete Code