2016-06-20 20 views
0

Ich erstelle eine Umfrage für ein Klassenprojekt und eine der Umfragefragen erfordert eine Dropdown-Liste, in der der Benutzer einen Brief auswählt. Die Idee ist, wenn der Benutzer einen Buchstaben auswählt, verbindet der Code sie mit einer anderen Website. So bringt zum Beispiel "A" sie zur Website X, "B wird sie zur Website X," N "bringt sie zur Website Y, etc ...Wie führe ich eine Formularauswahl auf eine andere Seite?

Ich bin sehr neu in der Programmierwelt und ich kenne die Grundlagen von HTML und JavaScript, daher ist meine Umfrage in HTML und JavaScript. Ich bin offen für irgendwelche Vorschläge. Ich war mir nicht sicher, ob ich den Link in den HTML einfügen könnte oder ob ich einen Onclick wie funktionieren müsste ich habe in den JavaScript-Code. Jede mögliche Richtung geben wird sehr geschätzt!

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>

+0

Ist dies auch ein Formular zum Einreichen? Wenn nicht, ist '' das falsche Element und der zu verwendende Kontext. – Rob

+0

Ich habe die

Elemente verwendet, weil ich möchte, dass das Programm den Benutzer zu einem externen Link bringt ... – Hannah

Antwort

1

document.getElementsByValue (“ Möglichkeit");

+0

0

Wenn ich mich nicht irre, können Sie einfach Ihre Option Werte gleich der Website, die Sie sie nehmen möchten. Zum Beispiel:

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

das ist, was ich auch dachte, aber es muss eine Möglichkeit für den Benutzer sein, zu treffen "absenden" und dann werden sie auf der dafür vorgesehenen Webseite .. – Hannah

0

diese Hilfe Sie:

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

0

Wenn Sie Sie keine Daten auf Ihre "neue Seite" senden dann nicht form und wahrscheinlich brauchen, , Taste. Der Code ist extrem einfach.

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

Okay, das macht Sinn ... aber dann brauche ich irgendwie Der Benutzer kann zu dieser newpage1.html gelangen - kann das durch eine Submit-Schaltfläche erreicht werden? Muss es eine separate onclick-Funktion geben, um die switch-Anweisungen auszuführen? Ich brauche irgendwie den Benutzer in der Lage zu sein, auf den "submit" -Button zu klicken und es bringt sie zu ihrer designierten HTML-Seite ... basierend auf dem von ihnen gewählten Buchstaben – Hannah

+0

Add 'alert ('blah blah');' vorher 'window.location = ...'. Die Nachricht wird angezeigt und wenn der Benutzer auf OK klickt, wird die Seite an einen neuen Ort geladen. –

+0

Super! Danke – Hannah

Verwandte Themen