如何根据下拉列表中选择的选项和html中的复选框显示结果?

时间:2017-01-19 18:37:13

标签: javascript html

我正在尝试根据用户选择的偏好显示酒店结果。例如,如果用户从首选项中选择“池”并按下提交键,则必须显示包含相应结果的新窗口。

同样地,当用户从下拉列表中选择一个地点并按下“GO”按钮时,它应该显示特定的网页,但它甚至没有响应。

我的两个按钮都没有指向我想要的网页。我是JavaScript的新手,并尝试过我的逻辑,但它没有用。

我的HTML代码是:

<!DOCTYPE html>
<html>

    <head>
    <div class="header">

<h1> Hello</h1>
</div> 
       <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 && Gym==false && Beach==false && WiFi==false && Spa==false)
          {
              window.open("http://http://localhost/dubai rev/codeReviews.php");
              return true;
           }
       }

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




     function goToNewPage(dropdownlist)
 {
 var url = dropdownlist.options(dropdownlist.selectedIndex).value;
 if (url != "")
 {
 window.open(url);
 }
 }
      </script>
</head>
    <body background="trip.jpg" style="background-image:
    url(trip.jpg)">


<div class="menu">
<ul>

<li><a href="/signup">SIGN-UP</a></li>
<li><a href="/login">LOGIN</a></li>
<li><a class="active" href="#n">HOME</a></li>



</ul>
</div>

<ul>

<div>
<ul class="rig columns-3" id="content"align="left" >
    <li>

    <h1>STAY</h1>
 <form name="dropdown">
 <select name="list" >
 <option selected>Select a place</option>
 <option value="http://search.msn.com/">Dubai</option>
 <option value="http://www.google.com/">London</option>
 <option value="http://www.search.com/">Lahore</option>
 <option value="http://www.dogpile.com/">New York</option>
 <option value="http://www.dogpile.com/">Canberra</option>
 </select>
 <input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
</form>



    <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="checkbox" name="hotel" value="WiFi" id="WiFi" checked="checked"> WiFi <br>
  <input type="checkbox" name="hotel" value="Spa" id="Spa" checked="checked"> Spa<br>

  <input type="submit" value="Submit">
    </li>
    </body>
    </html>

2 个答案:

答案 0 :(得分:1)

http://http://localhost/dubai rev / codeReviews.php

你这里有空位。 URL必须是没有空格的常量字符串。如果需要,可以通过将此字符更改为“%20”来编码空格。

:)

答案 1 :(得分:1)

dropdownlist.options( dropdownlist.selectedIndex ).value; 

必须是

dropdownlist.options[ dropdownlist.selectedIndex ].value;

对于网页,你已经超过了很多东西......假设这是你的实际代码:

var Pool= document.getElementById('Pool').checked;

当你在HTML中使用'pool'时,你正在使用'Pool'

...
else if(Pool==true && Gym==false && Beach==false && WiFi==false && Spa==false)

你在哪里初始化了WiFi和Spa?

此外,没有健身房的ID复选框。

您需要将%20放入网址中的空格。

尝试所有这些。