I am new to CSS and java script coding. I have created a webpage that displays hotels according to the place selected in dropdown list. I have a preference section in my web page that has a number of checkbox preferences. I want it to work as when a user selects a place from the dropdown list then he must select any checkbox preference that he wants and then the new webpage should get displayed. In my code the input (place selected) in the dropdown list is not connected to the preferences. How can I achieve this implementation?
Below is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
function is_checked()
{
var Pool= document.getElementById('Pool').checked;
var Gym= document.getElementById('Gym').checked;
var Beach= document.getElementById('Beach').checked;
if(Pool==false && Gym==false && Beach==false)
{
alert('Please check a category')
return false;
}
else if(Pool==true)
{
alert(http://http://localhost/reviews/codeReviews.php)
return true;
}
}
function formaction(checkbox)
{
document.getElementById("myForm").action = checkbox.value;;
}
</script>
</head>
<body background="Tring.jpg">
<div class="wrapper">
<div class="heading">
<h1>Hi</h1>
</div>
<ul class="navigation">
<li><a href="#">HOME</a></li>
<li><a href="#">LOGIN</a></li>
<li><a href="#">SIGN UP</a></li>
</ul>
<div id="container">
<div id="banner">
<img src="mtp.png">
<font color="#00e6ac"</font>
</div>
</div>
<div id="content">
<div id="stay"
<h1>STAY</h1>
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Select a place</option>
<option value="http://localhost/dubai/codeDubai.php">Dubai (UAE)</option>
<option value="http://localhost/canberra/Code.php">CANBERRA (AUS)</option>
<option value="http://localhost/newyork/Code.php">NEWYORK (NEW)</option>
</select>
<br>
<p2>Preferences</p2>
<form action="demo_form.asp" method="get" onsubmit="return is_checked()">
<input type="checkbox" name="hotel" value="Pool" id="pool"> Pool <br>
<input type="checkbox" name="hotel" value="Gym" checked="checked"> Gym <br>
<input type="checkbox" name="hotel" value="Beach" id="Beach"> Beach <br>
<input type="submit" value="Submit">
</div>
</body>
</html>
My css code is:
body{
padding:0;
margin:0;
background-image: url("Tring.jpg");
background-repeat: no-repeat;
}
wrapper{
width:600px;
background:#eee;
margin: 0 auto 0 auto;
}
.navigation{
float:right;
position:relative;
top:-150px;
}
li{
list-style:none;
float:left;
margin-right:50px;
font-size: 14;
font-family: serif;
color:white;
}
.heading{
height:100px;
background:lightblue;
padding:20px;
}
.navigation a{
color:white;
text-decoration: none;
font-size: 14px;
font-family: serif;
}
.navigation a:hover{
color:black;
}
.container{
width:1000px;
height:400px;
}
.banner{
background: url(mtp.png);
background-size: cover;
width: 1000px;
height:400px;
position: fixed;
float:center;
top:300px;
}
.content{
}
.stay{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.dine{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.shop{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.attract{
min-height: 500px;
background:#ddd;
width: 300px;
float: left;
position: relative;
}
.sidebar{
width: 300px;
float:right;
background:#ddd;
min-height: 400px;
}
.footer{
clear:both;
background:black;
height:20px;
color:white;
text-align:center;
padding:10px;
}
Aucun commentaire:
Enregistrer un commentaire