Sir, the page contains radio buttons and dropdown. I want to open new div with image(just like alert box, it is not possible to insert image in alert box) by selecting option from radio button and dropdown. I want to open a div by clicking the submit button.
I was trying it first by opening alert boxes first.
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="epaper.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript">
function checkButton(){
if((document.form2.six.checked == true)&&(Subject.value == "science")){
alert("class 6 is checked");
} else if(document.form2.seven.checked == true){
alert("class 7 is checked");
}
else if(document.form2.eight.checked == true){
alert("class 8 is checked");
}
else if(document.form2.nine.checked == true){
alert("class 9 is checked");
}
else if(document.form2.ten.checked == true){
alert("class 10 is checked");
}
}
</script>
</head>
<body>
<div class="col-md-12 col-xs-12 col col-sm-12 col-lg-12 heading">
<h1>Menu</h1>
</div>
<div class="container col-md-12 col-xs-12 col col-sm-12 col-lg-12 outerbox">
<div class="container" id="photu">
<img src="capture.png" id="image">
</div>
<div class="form">
<form name="form2">
<div class="container one">
<br>
<div >
<span id="i">Select Class:</span>
</div>
<br>
<ul>
<label>
<input name="class" value="Class 6" id="six" type="radio">  Class 6
</label>
</ul>
<ul>
<label>
<input name="class" value="Class 7" type="radio" id="seven">  Class 7
</label>
</ul>
<ul>
<label>
<input name="class" value="Class 8" type="radio" id="eight">  Class 8
</label>
</ul>
<ul>
<label>
<input name="class" type="radio" id="nine">  Class 9
</label>
</ul>
<ul>
<label>
<input name="class" type="radio" id="ten">  Class 10
</label>
</ul>
</div>
<div class="container two">
<br/><span id="i">Select Subject:</span><br>
<br>
<br>
<br>
<select id="subject" onchange="checkButton">
<option value="science" >SCIENCE</option>
<option value="social">SOCIAL STUDY</option>
</select>
<br>
<br><br><br>
<input type="submit" name="Submit" value="Submit" style="width:135px;border-style: solid;border-width: 3px;cursor: pointer ;" onClick='checkButton()' >
</div>
</form>
</div>
</div>
</body>
</html>
body{
background-color: #ece8e3 ;
}
.heading{
text-align: center;
}
.outerbox{ background-color:#f9f9f9;
margin:auto;
width:800px;
height: 400px;
border-radius: 10px;
box-shadow: 0 5px 5px #ddd;
}
#photu{ width:300px;
float:right;
}
#image{float: right;
height: 390px;width:300px;margin: auto;
margin-right: -30px;
margin-top: 5px;
}
.form{
font-family: Verdana,Geneva,sans-serif;
font-size: 15px;
}
#info{
width: 370px;
cellspacing:0;
cellpadding:0;
float: left;
height: 390px;
}
.divouterbox td{
text-align: left;
}
#Label1{
font-weight:bold;
}
#Label2{ width: auto;
font-weight: bold;
}
table{float: left}
.form{
float:left;
width:460px;
height: 400px;
}
.one{
float:left;
width:49%;
}
.two{
float: right;
width:49%;
}
#i{
font-weight: bold;
font-size: 15px;
}