How do I make a form selection go to another page?
Question
I'm creating a survey for a class project and one of the survey questions requires a dropdown list where the user will select a letter. The idea is when the user selects a letter, the code will link them to another website. So for example, "A" will bring them to website X, "B will being them to website X, "N" will bring them to website Y, etc...
I'm very new to the programming world and know the basics of HTML and JavaScript, thus my survey is in HTML and JavaScript. I'm open to any suggestions. I wasn't sure if I could add the link into the HTML or if I needed to make an onclick function like I have in the JavaScript code. Any direction give would be greatly appreciated!
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>
4 answers
solution1
0 2016-06-20 17:19:00
document.getElementsByValue（“ option”）;
solution2
0 2016-06-20 17:19:22
If I'm not mistaken you can just make your option values equal to the website you want to take them to. For example:
<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>
solution3
0 2016-06-20 17:21:17
this help you :
<!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>
solution4
0 2016-06-20 17:37:47
If you don't send data to your "new page" then you don't need form and, probably, button. The code is extremely simple.
<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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.