Question

我是CSS和java脚本编码的新手。我创建了一个网页，根据下拉列表中选择的位置显示酒店。我的网页中有一个首选项部分，其中包含许多复选框首选项。我希望它能够工作，因为当用户从下拉列表中选择一个地点时，他必须选择他想要的任何复选框首选项，然后才能显示新的网页。在我的代码中，下拉列表中的输入（所选位置）未连接到首选项。我怎样才能实现这个实现？

以下是我的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;
}

Answer 1

我看到两个问题，但我不确定其中任何一个是否会让您的表单正常工作。

function formaction(checkbox)
   {
     document.getElementById("myForm").action = checkbox.value;;
    }

形成函数需要一个带有id＆＃34; myForm＆＃34;的相应div。在您的HTML订单中工作。

<div id="content">
<div id="stay"
<h1>STAY</h1>

id =＆＃34;逗留＆＃34; div需要关闭。

如何使用下拉列表和复选框中的输入在html中显示新网页？

1 个答案: