0
Я новичок в CSS и кодировании java-скриптов. Я создал веб-страницу, которая отображает отели в соответствии с местом, выбранным в выпадающем списке. У меня есть раздел предпочтений на моей веб-странице с несколькими настройками флажка. Я хочу, чтобы он работал, когда пользователь выбирает место из раскрывающегося списка, тогда он должен выбрать любой предпочтительный флажок, который он хочет, а затем отобразить новую веб-страницу. В моем коде вход (место выбрано) в раскрывающемся списке не подключен к настройкам. Как я могу достичь этой реализации?Как отобразить новую веб-страницу в html с помощью ввода обоих выпадающего списка и флажка?
Ниже мой HTML-код:
<!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>
Мой CSS код:
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;
}