如何使表单选择转到另一个页面？答案

【问题标题】：How do I make a form selection go to another page?如何使表单选择转到另一个页面？
【发布时间】：2016-10-22 01:01:45
【问题描述】：

我正在为一个班级项目创建一个调查，其中一个调查问题需要一个下拉列表，用户将在其中选择一个字母。这个想法是当用户选择一个字母时，代码会将它们链接到另一个网站。例如，“A”将他们带到网站 X，“B”将他们带到网站 X，“N”将他们带到网站 Y，等等......

我是编程界的新手，并且了解 HTML 和 JavaScript 的基础知识，因此我的调查涉及 HTML 和 JavaScript。我愿意接受任何建议。我不确定是否可以将链接添加到 HTML 中，或者是否需要像在 JavaScript 代码中那样创建一个 onclick 函数。任何方向给予将不胜感激！

var StoryMap = function(){
  var elements = document.getElementsByTagName("option");
  if (elements === "A"){
    alert("Thank you! Please go to this Story Map (link)");
  }else{
    alert("Please select the first letter of your last name");
  }
};

<!DOCTYPE html>
<html>

<head>
<title>Esri Story Map Study</title>
<script src="javascript.js"></script>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<h2>The Windom Park Historic Residential District Pre-Survey</h2>

<h3>Please select the <span>first letter</span> of your <span>last name</span>: </h3>

<form>
  <p>
    <select name="firstLetter">
      <option value="Blank"></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
      <option value="F">F</option>
      <option value="G">G</option>
      <option value="H">H</option>
      <option value="I">I</option>
      <option value="J">J</option>
      <option value="K">K</option>
      <option value="L">L</option>
      <option value="M">M</option>
      <option value="N">N</option>
      <option value="O">O</option>
      <option value="P">P</option>
      <option value="Q">Q</option>
      <option value="R">R</option>
      <option value="S">S</option>
      <option value="T">T</option>
      <option value="U">U</option>
      <option value="V">V</option>
      <option value="W">W</option>
      <option value="X">X</option>
      <option value="Y">Y</option>
      <option value="Z">Z</option>
  </p>
<input type="submit" name="next" value="Next"/>
</form>

【问题讨论】：

这也是提交表单吗？如果不是，<form> 是错误的元素和使用的上下文。
我使用
元素是因为我希望程序将用户带到外部链接...

标签： javascript html forms hyperlink

【解决方案1】：

document.getElementsByValue("option");

【讨论】：

【解决方案2】：

如果我没记错的话，你可以让你的选项值等于你想把它们带到的网站。例如：

<select name="firstletter">
    <option value="www.google.com">A</option>
    <option value="www.amazon.com">B</option>
    <option value="www.yahoo.com"> C</option>
</select>

【讨论】：

我也是这么想的，但需要有一种方法让用户点击“提交”，然后他们将被带到指定的网页..

【解决方案3】：

这对你有帮助：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script>
            function StoryMap(){
              var ele = document.forms["frm"]["firstLetter"].value;
              if (ele == "A"){
                var link = "https://www.google.com";
                alert("Thank you! Please go to this Story Map " + link);
               }
               else{
                alert("Please select the first letter of your last name");
              }
            }
        </script>
        
        <h3>Please select the <span>first letter</span> of your <span>last name</span>: </h3>

<form name="frm" method="post" onsubmit="StoryMap()">
  <p>
    <select name="firstLetter">
      <option value="Blank"></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
      <option value="F">F</option>
      <option value="G">G</option>
      <option value="H">H</option>
      <option value="I">I</option>
      <option value="J">J</option>
      <option value="K">K</option>
      <option value="L">L</option>
      <option value="M">M</option>
      <option value="N">N</option>
      <option value="O">O</option>
      <option value="P">P</option>
      <option value="Q">Q</option>
      <option value="R">R</option>
      <option value="S">S</option>
      <option value="T">T</option>
      <option value="U">U</option>
      <option value="V">V</option>
      <option value="W">W</option>
      <option value="X">X</option>
      <option value="Y">Y</option>
      <option value="Z">Z</option>
      </select>
<input type="submit" name="next" value="Next"/>
</form>
    </body>
</html>

【讨论】：

【解决方案4】：

如果您不向“新页面”发送数据，那么您不需要form 并且可能不需要按钮。代码非常简单。

<select onchange="redirToDestination(this)">
  <option value="Blank"></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
  <option value="F">F</option>
</select>

...
function redirToDestination(elem){
   switch(elem.value){
     case 'A':
       window.location = 'newpage1.html';
       break;
     case 'B':
     case 'C':
       window.location = 'newpage2.html';
       break;
     ...
     default:
       alert('Select letter');
       break;
   }//switch
}//function

【讨论】：

好的，这是有道理的......但是我需要一些方法让用户可以访问那个 newpage1.html - 这可以通过提交按钮来完成吗？是否需要单独的 onclick 函数来执行 switch 语句？我不知何故需要用户能够点击“提交”按钮，它会将他们带到他们指定的 html 页面......基于他们选择的任何字母
在window.location=... 之前添加alert('blah blah');。将显示该消息，然后当用户单击“确定”时，页面将加载到新位置。
太棒了！谢谢