繁体   English   中英

如何选择表格到另一个页面?

[英]How do I make a form selection go to another page?

我正在为班级项目创建调查,其中一个调查问题需要一个下拉列表,用户可以在其中选择字母。 这个想法是当用户选择一个字母时,代码会将它们链接到另一个网站。 例如,“ 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> 

document.getElementsByValue(“ option”);

如果我没记错的话,您可以将您的选择值设置为与您要使用的网站相同。 例如:

<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>

这可以帮助您:

 <!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> 

如果您不将数据发送到“新页面”,则不需要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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM