Home  • Programming • JavaScript

Making a dynamic window with form input by javascript

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Student Admission</title>
<script language="javascript">
 
function dyn_window(){	
	
	var title="My Title";
	
	var name=document.f.txtName.value;
	var address=document.f.txtAddress.value;
	var course=document.f.txtCourse.value;
	var sex="";
	var subject="";
	
	//check if radio button is selected and read selected value 
	for (i=0;i<document.f.rdoSex.length;i++) {
	   if (document.f.rdoSex[i].checked) {
		sex = document.f.rdoSex[i].value;
	  }
    }
	
	for(j=0;j<document.f.chkSubject.length;j++){
	
	  if (document.f.chkSubject[j].checked) {
	    subject+=document.f.chkSubject[j].value+", ";
      }
	}
	
 
   // create new window here
	
    a=open('','','width=200,height=200')
	
	with(a.document){
		write("<html>");
		write("<head><title>"+title+"</title></head>");
		write("<body>");
		
		write("<div style='border:1px solid gray'>Name:"+name+"<br/><img src='2736.jpg' /><br/>");
		write("Address:"+address+"<br/>");
		write("Course:"+course+"<br/>");
		write("Sex:"+sex+"<br/>");
		write("Subject:"+subject+"<br/></div>");
		write("<input type='button' value='Close me' onclick='self.close();' />");
		write("<input type='button' value='Print' onclick='self.print();' />");
		write("</body>");
		write("</html>");
	}
	 
}// end the function 
 
</script>
</head>
 
<body>
<form action="#" method="post" name="f" style="width:200px; margin:0px auto; border:1px solid gray; padding:10px">
  
  <div>Name<br/>
  <input type="text" name="txtName" />
  </div>
  
  <div>Address<br/>
  <textarea  name="txtAddress" ></textarea>
  </div>
  
  <div>Course<br/>
  <select name="txtCourse" >
    <option value="MBA">MBA</option>
    <option value="BBA">BBA</option>
    <option value="CIS">CIS</option>
    <option value="EEE">EEE</option>
  </select>
  </div>
  
  <div>Sex<br/>
   Male<input type="radio" name="rdoSex" value="Male" />
   Female<input type="radio" name="rdoSex" value="Female" />  
  </div>
  
  <div>Subject<br/>
   English<input type="checkbox" value="English" name="chkSubject" />
   Bengali<input type="checkbox" value="Bengali" name="chkSubject" />
  </div>
  
  <div>
  <input type="button" onclick="dyn_window()" value="Submit" />
  </div>
</form>
</body>
</html>

Comments 0


Copyright © 2024. Powered by Intellect Software Ltd