Dropdown Liste - zwei Submit Buttons

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo,

ich bin hier neu im Forum und habe folgendes Problem:

Ich veröffentliche auf meine Homepage einige Traktate welche in mehreren Sprachen verfügbar sind. Diese sollen jeweils in jeder Sprache zum „Downloaden“ und „Online lesen“ sein. Um Platz zu sparen, dachte ich mir, ich erstelle eine einfache Drop-Down Liste, wo ich für den jeweiligen Traktat die Sprache auswählen kann.
Wenn man eine Sprache auswählt, so soll es zwei Buttons geben, mit denen man es entweder „Online lesen“ oder „Downloaden“ kann. Das heiß, mann wählt ein Eintrag aus, und soll die Möglichkeit haben auf zwei verschiedene Seiten weitergeleitet zu werden - je nachdem, welchen Button man anklickt.
Ich hoffe, dass mein Anliegen verständlich war.
Mit einem Button hab ich es ja hinbekommen, doch mit zwei Buttons bin ich nicht weitergekommen. Googeln hat mir nichts geholfen.

So sehen meine Codes bis jetzt, doch leider leiten beide Buttons auf ein und die gleiche Seite weiter.

HTML:

Sprache wählen

Deutsch
Englisch
Russisch

Script

<!–
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//–>

#2

Moin,

warum machst Du das überhaupt mit JavaScript? Wenn jemand JS abgestellt hat, dann kann er da nichts auswählen.

Benutzt Du stattdessen eine serverseitige Auswertung, kannst Du einfach zwei Submit-Buttons machen und im Script dann auf die Value des Submit-Buttons abfragen und in die eine oder andere Richtung weiterleiten.

Und selbst wenn es denn JS sein muss, dann kannst Du doch trotzdem zwei Submit-Buttons machen und zweimal Deine Funktion aufrufen, beim einen Mal verlinkst Du auf die Ansicht, beim anderen Mal auf das Download-File. Es müssten dann aber auch keine Submit-Buttons sein, da musst Du dann ja wieder das Submit-Event abfangen, damit Dein Formular nicht abgeschickt wird - ah, ja, machst Du ja schon im onSubmit.

Aber bedenke, dass Du zu Deiner JS-Lösung auf jeden Fall auch eine andere Lösung brauchst, dass das auch die Leute nutzen können, die kein JS haben.

Freundliche Grüße,
-Efchen

#3

Danke schon mal für die Antwort.

Ich würde gern es auch ohne Javascript machen, doch weiß ich leider nicht, wie es gehen soll. Ich bin halt ein Anfänger und freute mich über diese Möglichkeit, welche ich im Netzt gefunden hab. Wenn es aber bessere gibt, so wäre ich gern bereit, was anderes einzusetzen! Hättest du vielleicht ein Beispiel für mich oder ein Tutorial, wo es gut erklärt wird? Ich wäre für jede Hilfe dankbar!

#4

Moin,

nein, Beispiele habe ich nicht. Solange Du keine serverseitige Sprache einsetzen kannst (weil Du keine beherrschst), dann wirst Du diese Lösung auch nicht umsetzen können.

Meiner Meinung nach sollte man Dinge nicht erzwingen, zu denen man nicht genug weiß. Man sollte sich informieren und lernen. Ich stehe zusammengewürfelten, aus dem Internet herunter geladen, ohne zu wissen, was genau das bewirkt, Pseudo-Lösungen eher skeptisch gegenüber.

Daher würde ich empfehlen, Du informierst Dich über serverseitige Programmierung und lernst eine passende Programmiersprache (z.B. PHP oder Perl). Das dauert dann natürlich - je nach Vorkenntnisse in Prograqmmierung - Wochen bis hin zu Jahren. Ich denke, das ist nicht die Antwort, die Dir vorschwebt.

Alternativ kannst Du ja auch mit HTML-Mitteln arbeiten, indem Du einfache Links zur Verfügung stellst. Für alles andere (inkl. einer JavaScript-Lösung) brauchst Du Programmierkenntnisse.

Sorry, aber trotzdem liebe Grüße,
-Efchen

#5

Hallo,

Aller Anfang ist schwer, also lasse dich nicht entmutigen, viele (bisher dachte ich alle) beginnen das Programmieren mit Googeln, und in Wirklichkeit hört das Googeln nach Lösungen nie auf.

Zu deiner Frage. Ich habe mal den code ein wenig bereinigt.

 Untitled Page
 function redirect2selection() {
 window.location = document.getElementById('goUrl').value;
 }
 function startDownload() {
 var url = document.getElementById('goUrl').value;
 window.open(url, 'Download');
 }
 Sprache wählen
 DeutschEnglischRussisch

Du hast in einem Scriptblock nun zwei Funktionen (javascript), eine erledigt das Redirect, die zweite startet den Download. Diese werden nun von zwei Inputs vom Typ Submit aufgerufen.

Zum Download selbst: Das funktioniert nur wenn auch wirklich eine downloadfähige Datei dahinter steht, also mit einer gültigen Dateiendung wie PDF oder ZIP oder, oder… . Mit Seiten die der Browser als HTML bekommt, also .htm, .html, .php, .asp, .aspx, … wird er keinen Download initiieren

Viel Erfolg noch beim weiteren Einstieg in die seltsame Welt der Programmierer :wink:

Grüße
fliegerbaer

#6

Vielen Dank Fliegerbär für deine Antwort. Mit dem Redirect hab ich es leider nicht ganz verstanden. Der eine Button muss ja zum Download sein - er führt also zu einer PDF Datei unter der andere Button ist „Online lesen“ und muss zu einer HTML seine führen, wo dann der Traktat zum online lesen ist. Meine frage ist daher, wo gebe ich den zweiten Link ein und wie verbinde ich es mit dem zweiten Button?

#7

Hallo,

Ist der Pfad gleich in beiden Fällen? Und ist nur dieser Teil in der Dropdownbox hinterlegt? Und steht DE EN RU jeweils für die Dateien, also DE.pdf und DE.hmtl

Dann müsste das JavaScript so zu ändern sein (ich hab’ mir erlaubt eine kleine Abfrage hinzuzufügen, ob etwas selektiert wurde):

 function checkSelection() {
 var selection = document.getElementById('goUrl').value;
 if (selection == '') {
 alert("Bitte eine Sprache wählen");
 return false;
 }
 return true;
 }
 function redirect2selection() {
 if (checkSelection()) {
 window.location = document.getElementById('goUrl').value + ".html";
 }
 }
 function startDownload() {
 if (checkSelection()) {
 var url = document.getElementById('goUrl').value + ".pdf";
 window.open(url, 'Download');
 }
 }

und das Formular sieht dann so aus

 Sprache wählenDeutschEnglischRussisch

Hoffe das ganze richtig verstanden zu haben.

Grüße
fliegerbaer

1 Like
#8

WOW, ich bin begeistert. Vielen Dank! Die Abfrage, ob etwas selektiert wurde finde ich klasse! Die Pfade für „PDF“ und „HTML“ werde ich schon anpassen können.

Noch mal vielen Dank!!!

#9

Auch auf meiner Seite Freude, über deine Begeisterung. :smile:

lg
fliegerbaer

#10

Moin,

Zum Download selbst: Das funktioniert nur wenn auch wirklich
eine downloadfähige Datei dahinter steht, also mit einer
gültigen Dateiendung wie PDF oder ZIP oder, oder… . Mit
Seiten die der Browser als HTML bekommt, also .htm, .html,
.php, .asp, .aspx, … wird er keinen Download initiieren

Was der Browser zum Download anbietet, liegt an den eingestellten Programmendungen. Er kann auch bei ZIP-Dateien automatisch ein Unzip-Programm starten oder bei PDFs das Acrobat Plugin starten o.ä.

Man kann eine Datei allerdings mit dem MIME-Type application/octet-stream ausliefern, das wird dann auch zum Download angeboten.

Ich persönlich bevorzuge es aber, Dateien grundsätzlich als einfachen Link anzubieten, dann kann der Nutzer selber entscheiden, ob er den Browser zum Betrachten nutzen will oder ob er das Ziel speichern will. Wenn z.B. PDFs als ZIP gepackt ausgeliefert werden, ist das immer mehr als nervig, weil man erst das ZIP speichert, das dann auspackt und es dann ansieht. Wäre doch viel einfacher über das Plugin im Browser…

Gruß,
-Efchen

#11

Zahlreiche Möglichkeiten - keine letzte Wahrheit
Hallo,

Sowohl jeder Web-Browser als auch jeder Web-Server führt eine Liste mit ihm bekannten MIME-Typen. Bei der Kommunikation müssen sie sich darauf einigen, ob der Empfänger den MIME-Typ akzeptiert, den der Sender senden will.

Moderne Browser akzeptieren in der Regel jeden MIME-Typ und bieten dem Anwender einfach an, falls sie den MIME-Typ nicht kennen, die zu empfangenden Daten als Download-Datei abzuspeichern. Web Server sind da nicht so tolerant, MIME Types die sie nicht kennen, verarbeiten sie nicht.

So kann es unter Umständen Sinn machen etwas zu zippen, was der Server verweigert nur damit man es zum Client bekommt. Kommt halt auf den MIME Type an, und welche Möglichkeiten/Berechtigungen ich zur Einstellung am Server habe.

Jedenfalls kommen clientseitig dann bei Windows die Einstellungen ins Spiel, die der Benutzer für die Dateitypen vorgenommen hat, falls er sie nicht so belassen hat wie nach der Installation der zugehörigen Anwendung. Z. B. ob er jedesmal entscheiden will zwischen Download und Öffnen bei bestimmten Dateitypen oder ob er den Default geändert hat.

Im Browser kann man das Öffnen des Save As Dialoges mit content-disposition: attachment; erzwingen, wenn ich mich richtig erinnere. Auch das kann Sinn machen.

Wenn ich zum Beispiel beim Online-Banking die Buchungsbestätigung downloaden will über Button, dann möchte ich einen Save-As Dialog erhalten und nicht erst Adobe Reader durch den Browser laden lassen, dann das Dokument nur damit ich dann nochmals auf Speichern klicken muss.

Die Kombination von Anforderung, Zielgruppe und Zone (Internet / Intranet) gibt die zu wählende Lösung vor. Ein „das macht man so“ gibt es aus diesem Grund für mich in den wenigsten Fällen.

Grüße
fliegerbaer

#12

Moin,

Ein „das macht
man so“ gibt es aus diesem Grund für mich in den wenigsten
Fällen.

Das beste „das macht man so“ ist das, was dem Benutzer freie Wahl lässt und ihm keine Optionen verwehrt.

Bei einem Link auf eine Datei ist das z.B. dass man sie direkt im Browser anzeigen lässt und nicht zippt o.ä., damit der eine sich das im Browser ansehen kann, der andere durch Rechtsklick/Speichern unter die Datei auch speichern kann.

Bei Links generell ist das auch, dass man kein neues Fenster öffnet, weil dann der Benutzer, der den Link im selben Fenster+Tab öffnen will, daran gehindert wird. Lässt man target grundsätzlich weg, kann jeder selber entscheiden, niemand wird in seinen Möglichkeiten eingeschränkt.

Derer gibt es zahlreiche andere Beispiele.

Liebe Grüße,
-Efchen