• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage HTML - Dateiname aus Variable übergeben

P

peternmb

Mitglied
Hallo,

ich möchte in einem kleinen HTML-Script eine Datei in einem inline-Frame anzeigen, der Dateiname soll dabei aus den Formulareingaben generiert werden.
Den Dateinamen kann ich ermittlen, aber die Datei nicht anzeigen - wie kann ich den Dateinamen übergeben?

Ich habe ein vereinfachtes Demoscript erstellt:
HTML: 
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Startseite</title>
</head>

<script language="JavaScript">
<!--
function showtable() {
var datei = "";
if(document.form.WERTUNG[0].checked==true){datei="Tag.html";}
if(document.form.WERTUNG[1].checked==true){datei="Woche.html";}
if(document.form.WERTUNG[2].checked==true){datei="Monat.html";}
if(document.form.WERTUNG[3].checked==true){datei="Jahr.html";}
alert ("Dateiname: "+datei);
}
// -->
</script>

<body bgcolor="#E7E7E7">

<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#E7E7E7">
    <tr>
        <td valign="top">
        <p align="center"><font size="7" face="Arial">
        Mein grosser Test
        </font></p>
        <form name="form" method="post" action="$datei" target="I1" onsubmit="showtable(this.form)"  >
            <table border="1" width="98%" height="47" align=center >
                <tr>
                    <td width="18%" height="20">
                    <input type="radio" name="WERTUNG" value="Einzel" checked><font face="Arial" size="4">
                    Tageswertung</font></td>
                    <td width="18%" height="20">
                    <input type="radio" name="WERTUNG" value="Tandem"><font face="Arial" size="4">
                    Wochenwertung</font></td>
                    <td width="18%" height="20">
                    <input type="radio" name="WERTUNG" value="Mixed"><font face="Arial" size="4">
                    Monatswertung</font></td>
                    <td width="23%" height="20">
                    <input type="radio" name="WERTUNG" value="Mannschaft"><font face="Arial" size="4">
                    Jahreswertung</font></td>
                    <td width="21%" height="20">
                    </font></td>
                </tr>
            </table>
            <p align="center">
            <input type="submit" value=" Auswertung anzeigen " name="B1" style="font-family: Arial; font-size: 20"></p>
        </form></td>
    </tr>
</table>

<p align="center">
<iframe name="I1" src="Start.html" width="100%" height="73%">
Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.
</iframe></p>

</body>

</html>

In dieser Zeile liegt mein Problem:
<form name="form" method="post" action="$datei" target="I1" onsubmit="showtable(this.form)" >

Ich möchte nach Möglichkeit ohne PHP auskommen.
Idealerweise würde noch eine Fehlerseite gezeigt, wenn die angeforderte Datei nicht vorhanden ist.
 
Erstmal solltest du dir html5 ankucken was da veraltet ist oder was neu ist.
1 language="JavaScript" = veraltet kann weg
2 bgcolor="#E7E7E7" = WEG
3. cellpadding="0" cellspacing="0" width="100%" = WEG
4 <font size="7" face="Arial"> = ganz alt kann weg,
5 valign="top" , align="center" WEG
Das meiste davon wir alles in der Css Datei geschrieben.

Dann kannst du dein radibuttons mit Javascript auslesen und ohne einen Submit Button auswerten und beim iframe
das src tauschen
 
Zuletzt bearbeitet:
Hallo,

das bringt mich jetzt nicht wirklich weiter...

Das Codebeispiel ist mit einer uralten Frontpageversion erstellt und läuft auf allen Browsern.
Ich möchte nach Möglichkeit nicht mit PHP und auch nicht mit CSS arbeiten.
 
Ich kann mittlerweile den Dateinamen übergeben und die Datei öffnen, allerdings nur in einem neuen Fenster.
Ich schaffe es einfach nicht, die Datei in dem inline-Frame anzuzeigen.
Javascript: 
script language="JavaScript">
<!--
function showtable() {
var datei = '';
if(document.form.WERTUNG[0].checked==true){datei='Tag.html';}
if(document.form.WERTUNG[1].checked==true){datei='Woche.html';}
if(document.form.WERTUNG[2].checked==true){datei='Monat.html';}
if(document.form.WERTUNG[3].checked==true){datei='Jahr.html';}
//alert ("Dateiname: "+datei);

//window.open(datei);   //funktioniert in neuem Fenster
window.open(datei,'I1');     //I1 ist mein inlineframe

}
// -->
</script>
Laut Beschreibung der Funktion window.open wird das Zielfenster als 2. Parameter mitgegeben.
Egal wie ich das eingebe, es klappt nicht, evtl. habe ich da nur einen Syntaxfehler - bitte um Hilfe.
 
peternmb schrieb:
Hallo,
das bringt mich jetzt nicht wirklich weiter...
Das Codebeispiel ist mit einer uralten Frontpageversion erstellt und läuft auf allen Browsern.
Ich möchte nach Möglichkeit nicht mit PHP und auch nicht mit CSS arbeiten.
Zum Vergrößern anklicken....

Schmeiß Frontpage weg.
Kann sein das es noch läuft doch irgendwann sagen die Browser Nein zu den alten Code.


Warum window.open ?
Du wolltest doch den Inhalt im iframe anzeigen oder ?
Dann versuch es mal damit
Code: 
<!doctype>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<style>
   body{
  background:#E7E7E7;
}
</style>
</head>
<body>
<h2>Mein grosser Test</h2>
<form>
<input type="radio" name="WERTUNG" value="Tag.html" checked>Tageswertung
<input type="radio" name="WERTUNG" value="Woche.html"> Wochenwertung
<input type="radio" name="WERTUNG" value="Monat.html">Monatswertung
<input type="radio" name="WERTUNG" value="Jahr.html">Jahreswertung
</form>
<iframe id="ifra" src="Start.html" width="100%" height="73%">
</iframe>
<script>
boxen= document.querySelectorAll('input');
boxen.forEach(function(i){
   i.addEventListener('click',function(){
       document.getElementById('ifra').src=i.value;
       console.log(i.value);
   });
});
</script>
</body>
</html>
 
basti1012 schrieb:
Schmeiß Frontpage weg.
Kann sein das es noch läuft doch irgendwann sagen die Browser Nein zu den alten Code.
Zum Vergrößern anklicken....
Kannst du mir einen WYSIWYG-Editor empfehlen, der auch für Anfänger geeignet ist?
Ich habe von HTML, Javascript usw. wenig Ahnung - benötige es allerdings auch kaum.

Vielen Dank, dein Code funktioniert einwandfrei - auch wenn ich das Meiste nicht wirklich verstehe.
Das war allerdings ein gekürztes Beispiel, ich benötige noch ein Dropdownfeld dessen Inhalt dann auch in die Generierung des Dateinamens mit einfließen soll. Da wäre dann vielleicht auch sinnvoller die Anzeige über einen Button zu realisieren statt direkt über den Event.

Wäre super, wenn du mir dabei noch einmal helfen könntest.

HTML: 
<!doctype>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<style>
   body{
  background:#E7E7E7;
}
</style>
</head>
<body>
<h2>Mein grosser Test</h2>
<form>

<input type="radio" name="WERTUNG" value="Tag.html" checked>Tageswertung
<input type="radio" name="WERTUNG" value="Woche.html"> Wochenwertung
<input type="radio" name="WERTUNG" value="Monat.html">Monatswertung
<input type="radio" name="WERTUNG" value="Jahr.html">Jahreswertung

Gruppe <select size="1" name="      Gruppe">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

</form>
<iframe id="ifra" src="Start.html" width="100%" height="73%">
</iframe>
<script>
boxen= document.querySelectorAll('input');
boxen.forEach(function(i){
   i.addEventListener('click',function(){
       document.getElementById('ifra').src=i.value;
       console.log(i.value);
   });
});
</script>
</body>
</html>
 
Das es mit Einen Button geht das kriegst du doch hin oder ?
Ein Button erstellen , ( ohne Submit ) und mit addEventListener und click arbeiten.
Dann die angeklickten Radio Buttons abfragen.
Was heißt den genau das das Dropdownfeld mit da rein soll.
Wie sieht den der Link dann aus ?

Hast du schon irgendwelche Versuche gemacht ?
 
peternmb schrieb:
Ja, siehe in meinem obigen Code.
Zum Vergrößern anklicken....
Ok, das las ich dann mal unkommentiert.
So mit Dropdown so

peternmb schrieb:
Ich habe eben gemerkt, dass ich sogar noch eine weitere Auswahlmöglichkeit mit 2 RadioButtons benötige.
Dann müsste der Link so aussehen: "Gruppe01_Woche_A.html"
Zum Vergrößern anklicken....

Und das kriegst du jetzt selber hin.
Du siehst ja wie es mit den 4 Radio Buttons geht, dann solltest du das mit den 2 zusätzlichen jetzt auch selber hinbekommen.
Überlege dir vorher, was du als Value in den Buttons angeben tust.
Wenn ich deinen Link sehe , denke ich das du am Ende das "A" , oder als "B" oder so angezeigt werden soll.
Dazu müsstest du jetzt die Values der Buttons ändern (das wäre einfacher) oder die jetzigen mit replace oder regex ändern.

Aber versuch erstmal dein Glück und wenn du nicht weiter kommen tust dann zeig deinen Code was du versucht hast.


Einen Editor kann ich dir eigentlich nicht empfehlen.
Ich benutze selten ein und wenn ich mal ein brauche, nehme ich Notepad.
 
Zuletzt bearbeitet:
Hatte leider einige Tage keine Zeit und komme damit einfach nicht weiter.
Musste einiges noch umstellen, aber so sollte es jetzt hinkommen
Ich verstehe den Script-Teil einfach nicht.

HTML: 
<!doctype>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<style>
   body{
  background:#E7E7E7;
}
</style>
</head>
<body>
<h2>Mein grosser Test</h2>
<form>

Wertung <select size="1" name="  Wertung">
<option selected>Tageswertung</option>
<option>Wochenwertung</option>
<option>Monatswertung</option>
<option>Jahreswertung</option>
</select>

Gruppe <select size="1" name="      Gruppe">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<input type="radio" name="Geschlecht" value="Damen" checked>Damen
<input type="radio" name="Geschlecht" value="Herren"> Herren

<input type="button" name="anzeigen" Value="anzeigen" 

</form>
<iframe id="ifra" src="Start.html" width="100%" height="73%">
</iframe>
<script>
boxen= document.querySelectorAll('input');
boxen.forEach(function(i){
   i.addEventListener('click',function(){
       document.getElementById('ifra').src=i.value;
       console.log(i.value);
   });
});
</script>
</body>
</html>
Im Dateinamen der Datei die in dem iFrame angezeigt wird sollen alle 3 Selectionsmöglichkeiten einfließen.
Die genauen Bezeichner kann ich ja problemlos noch anpassen wenn das Gerüst funktioniert.
 
Kuck dir mal dein html an da fehlt >
nach name sind viele Leerzeichen die wir so nicht haben wollen

Hast du dir das Script bei Codepen den mal angekuckt wie ich da das Dropdownfeld auslesen ( ID ).
Kuck dir das Script an und versuche einfach mal da noch ein dropdown einzubauen.
Wenn das klappt löscht du die radio buttons wieder raus.
Oder halt andersrum.

Den Js Code den du da jetzt drinne hast wahr ja für die radio Buttons
 
Ich habe jetzt dabei geschrieben, wofür es ist.
Die iFrames geben das zurück, was du da zusammen baust


Jetzt hier ein paar Links zum Lernen und lesen.

Javascript Input / Select – Werte auslesen| mediaevent.de

Den aktuellen Wert von Formularfeldern – input type=text, type=checkbox, type=radio – mit querySelector / querySelectorAll auslesen.
www.mediaevent.de www.mediaevent.de

Javascript Strings • Zeichenketten

Ein String ist eine Zeichenkette (z.B. 'Nur noch heute'), die durch einfache oder doppelte Hochkommas vom Code des Scripts getrennt ist.
www.mediaevent.de www.mediaevent.de
aber hier selber versuchen
 
Zuletzt bearbeitet:
Super, dank deiner Hilfe habe ich es mit etwas rumprobiererei fast perfekt hinbekommen :smile:

Ich habe noch 3 Fragen:
1. Wie kann ich zwischen den selects (ich habe jetzt 3 + den Button) einen Abstand machen?
Gibt es da etwas wie Tabs?
2. Wie kann ich den iFrame nach unten bildschirmfüllend machen?
Es soll oben immer meine Auswahl stehen bleiben und im unteren Teil das Gewählte angezeigt werden.
3. Wie kann ich (ohne CSS) für die gesamte Seite eine andere Schriftart festlegen, Arial gefällt mir nicht.
 
zu
1. zb margin,
2.zb height
2a. das wird wohl noch zu schwer sein für dich .
und für mich das zu erklären.Ich suche mal nach Links die das erklären können.
3.Natürlich mit css.
Im body verwenden, sollte eigentlich dann alles übernehmen wenn es wo anders nicht überschrieben wird.

zu 1 und 2.Setze die ganze Seite mal mit Flexbox auf weil dann gibt es noch andere möglichkeiten.
Flexbox wird dir später auch helfen alles responsiv zu machen und so weiter.
CSS Flexible Box Layout Module - verschiedene Beispiele einzelner CSS3-Flexbox-Eigenschaften
 
Ich habe die Frage eben wohl nicht richtig gelesen.
Zu Punkt 2.
Wie du im Codepen sehen kannst bleibt das ausgewählte da stehen wenn du den Button klicken tust.
Kann es sein das du ein submit Button nutzt oder so ?
Weil eigentlich sollte das ausgewählte da stehen bleiben bei den Code von Codepen
 
Ich habe den Code von Codepen in eine lokale HTML-Datei eingefügt und es funktioniert alles.
Es ist OK, dass die Auswahl stehen bleibt - das spart mir sogar eine seperate Anzeige der Auswahl.
Aber was hat das mit meiner Frage 2 (der Größe des iframes) zu tun? Das ist das einzige was noch nicht perfekt gelöst ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben