2016-08-08 8 views
0
wählt

ausgewählt gehen Fabrikat:eine Schaltfläche, um eine Verbindung in Form

<form> 
    <select name="someoptions"> 
     <option value="page1.html">Page 1</option> 
     <option value="page2.html">Page 2</option> 
    </select> 
    <input type="submit" value="Submit" class="buttontheme"> 
</form> 

ich diesen Link auf Stackoverflow gefunden: Open a link via a button press chosen from a form select option

Aber die gewählte Antwort nicht erklären wo man das Stück Code oder wie man es in der HTML-Seite verwendet. Kann mir jemand erklären, wie ich das erreichen kann? Danke

Bisher habe ich dies als test.html ohne andere Dateien:

<head> 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
    <script> 
    $('#select-id').change(function() { 
    url = $('#select-id').val(); 
    window.open(url); 
}); 
    </script> 
    <script> 

</script> 

</head> 

<body> 

<form> 
    <select id="select-id" name="someoptions"> 
     <option value="https://magecomp.com/blog/how-to-install-magento-2-on-windows-on-xampp-server-with-git/">Page 1</option> 
     <option value="https://magecomp.com/blog/how-to-install-magento-2-on-windows-on-xampp-server-with-git/">Page 2</option> 
    </select> 
    <input type="submit" value="Submit" class="buttontheme"> 
</form> 

</body> 

Wenn ich wählen Sie eine Option und klicken Sie dann auf die Schaltfläche Senden, es nimmt mich aus:

file:///C:/Users/eyeglasses/Desktop/Website/test.html

zu

file:///C:/Users/eyeglasses/Desktop/Website/test.html?someoptions=https%3A%2F%2F‌​magecomp.com%2Fblog%2Fhow-to-install-magento-2-on-windows-on-xampp-server-with-gi‌​t%2F

und macht nichts oder ändert die Seite (ich sehe immer noch das Dropdown-Menü und Submit-Taste).

Antwort

0
<form> 
     <select id="select-id" name="someoptions"> 
      <option value="page1.html">Page 1</option> 
      <option value="page2.html">Page 2</option> 
     </select> 
     <input type="submit" value="Submit" class="buttontheme"> 
    </form> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
    <script> 
    $('#select-id').change(function() { 
     url = $('#select-id').val(); 
     window.open(url); 
    }); 
    </script> 

Sie haben die jQuery-Bibliothek in Ihrem Kopf von html zu schließen, es zu machen run.window.open ist eine Funktion von JavaScript, die URL in Browser öffnet. Sie müssen die URL an die Funktion window.open übergeben, um das gewünschte Ergebnis zu erhalten. Arbeiten an jsfiddle

+0

Dies würde nicht funktionieren. Sie wenden einen eventListener auf ein Schaltflächenelement an, aber das Formular enthält eine Eingabe als Übergabeschaltfläche. – Tim

+0

Entschuldigung, ich hatte meinen Code nicht bemerkt. Ich hatte dies richtig gemacht Bitte überprüfen Sie dies. –

+0

Noch fehlt das Hash-Tag vor der ID – Tim

0

Der Code in Ihrem Link nur registriert den Klick sogar auf eine Schaltfläche auf der Seite. Dies wäre eine bessere Lösung:

<form id="goToPageForm"> 
    <select name="page"> 
     <option value="page1.html">Page 1</option> 
     <option value="page2.html">Page 2</option> 
    </select> 
    <input type="submit" value="Submit" class="buttontheme" /> 
</form> 

<script type="text/javascript"> 
    $('#goToPageForm').submit(function(e) { 
     document.location = $(this).find('[name="page"]').val(); 

     e.preventDefault(); 
     return false; 
    }); 
</script> 

Unabhängig davon, wie das Formular abgeschickt wird (das heißt durch Drücken der Enter durch den Absenden-Button klicken), wird der Browser auf die ausgewählte Seite umgeleitet werden.

+0

Dies scheint nicht zu funktionieren . Ich erstellte eine minimale test.html Seite mit nur dem Skript hier eingefügt zwischen den Tags und den Rest des Formulars zwischen den Tags, und ich ersetzte die Links mit google.com und yahoo.com, aber es geht nicht zu diesen Websites. Stattdessen, wenn ich auf die Submit-Schaltfläche klicke, bleibt es auf der gleichen Seite –

+0

Das Skript geht nicht in head-tag, lassen Sie es in dieser Reihenfolge im Körper Ihrer Seite. https://jsfiddle.net/5ctfgxc6/ – Tim

+0

Ich verstehe nicht, warum das nicht funktioniert. Ich habe Ihren Code auf einer test.html-Seite kopiert und eingefügt und die Optionswerte in http://www.google.com/ und http://www.yahoo.com/ geändert, aber wenn ich beispielsweise die Option Google auswähle Klicken Sie anschließend auf Senden, die Seite führt keine Aktionen aus und die URL in der Adressleiste wird angezeigt: file: /// C: /Users/eyeglasses/Desktop/Website/test.html? page = http% 3A% 2F% 2Fwww .google.com% 2F –

Verwandte Themen