フォームの選択を別のページに移動するにはどうすればよいですか？

私はクラスプロジェクトのアンケートを作成しています。アンケートの質問の1つには、ユーザーが手紙を選択するドロップダウンリストが必要です。アイデアは、ユーザーが文字を選択すると、コードはそれらを別のWebサイトにリンクします。たとえば、 "A"はウェブサイトXにそれらを持って来るでしょう、 "BはウェブサイトXにそれらをされます、" N "はそれらをウェブサイトYなどに持ち込みます...フォームの選択を別のページに移動するにはどうすればよいですか？

私はプログラミング世界HTMLとJavaScriptの基礎を知っているので、私の調査はHTMLとJavaScriptで書かれています。私は何か提案がありますか？私はHTMLにリンクを追加することができるかどうか、あるいはonclick関数私は、JavaScriptコードを持っている。いずれの方向の弾力をいただければ幸いです！

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>

出典

2016-06-20 Hannah

これは送信用のフォームですか？そうでない場合、 '

要素を使用して、ユーザーが外部リンクに移動させるようにします。 – Hannah

をdocument.getElementsByValue（」オプション"）;

出典

2016-06-20 17:19:00

–

私が間違っていない場合は、あなたが選択したいオプションの値を、あなたが望むウェブサイトと同じにすることができます。

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

出典

2016-06-20 17:19:22 rtoken

これも私が考えていたものですが、ユーザーが「送信」を押す方法が必要です。そして、指定されたWebページに移動します。 – Hannah

このヘルプあなた：たとえば

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

出典

2016-06-20 17:21:17 Ehsan

あなたはおそらく、あなたは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

出典

2016-06-20 17:37:47

これは意味があります。ユーザーはそのnewpage1.htmlにアクセスできます。送信ボタンを使用してこれを行うことはできますか？ switch文を実行するには、別のonclick関数が必要ですか？ "submit"ボタンをクリックする必要があります。指定した文字に基づいて指定されたhtmlページに移動します。 – Hannah

'alert（ 'blah blah'）;'を前に追加します'window.location = ...'。メッセージが表示され、ユーザーが[OK]をクリックすると、ページが新しい場所に読み込まれます。 –

恐ろしい！ありがとうございました – Hannah

フォームの選択を別のページに移動するにはどうすればよいですか？

答えて

関連する問題