Formular und Javascript für Anfänger

Etze

Etze

Aktives Mitglied
Thread Starter
Dabei seit
04.04.2005
Beiträge
465
Reaktionspunkte
3
Hallo,

ich teste gerade eine für mich neue Möglichkeit, meine Bookmark-Sammlung online zu verwalten. Testweise habe ich es jetzt per einfachem HTML-Formular mit Javascript gemacht:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
    function formHandler(form){
        var URL = document.form.site.options[document.form.site.selectedIndex].value;
        window.location.href = URL;
    }

</SCRIPT>
</HEAD>

<BODY>
    <form name="form">
        <select name="site" size=1 onChange="javascript:formHandler()">
            <option value="">Computer</option>
            <option value="domain.de">MacTechNews</option>
            <option value="amiga-news.de">Amiga-News</option>
        </select>



    </form>

</body>


</html>

Das funktioniert soweit auch gut: sobald ich aus der Auswahlbox einen Eintrag wähle, werde ich zur entsprechenden URL geleitet.

Nun möchte ich aber weitere Kategorien in weiteren Auswahlboxen einfügen. Wenn ich es aber so mache, wie ich vermute, dass es laufen *sollte*, läuft es natürlich gar nicht... Die Boxen werden zwar angezeigt, aber das Javascript wird nicht mehr ausgeführt. Da ich mich mit JS nicht auskenne, finde ich den Fehler auch nicht. Wie gehe ich hier vor? Mein Versuch war so:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

<html>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
    function formHandler(form){
        var URL = document.form.site.options[document.form.site.selectedIndex].value;
        window.location.href = URL;
    }

</SCRIPT>

</HEAD>


<BODY>
    <form name="form">
        <select name="site" size=1 onChange="javascript:formHandler()">
            <option value="">Computer</option>
            <option value="domain.de">Domain</option>
            <option value="http://www.amiga-news.de">Amiga-News</option>
        </select>

        <select name="site" size=1 onChange="javascript:formHandler()">
            <option value="">Konsole</option>
            <option value="http://www.areagames.de">AreaGames Forum</option>
            <option value="http://www.planetds.de">Planet DS</option>
        </select>


    </form>

</body>


</html>
 
Zuletzt bearbeitet:
@Etze: Ich meine, ich weiss, was Du möchtest. Du willst in Abhängigkeit der Kategorie die Links verwalten oder?. Ich habe mal sowas mit JS gebaut:


Das funktioniert mit einem Javascript, ist aber etwas komplexer. Ich habe als Basis dieses Scripte genommen:

http://www.javascriptkit.com/script/cut183.shtml

2nd
 
thoralf: natürlich kenne ich das, sonst wäre ich nicht so weit gekommen! Aber bei der Suche meines Fehlers hat mir die Seite nicht geholfen. Sonst hätte ich hier doch nicht gefragt. Aber ich schaue gerne noch mal, vielleicht habe ich die Lösung auch übersehen.

2ndreality: das sieht gut aus. Ist zwar nicht die Lösung, die ich eigentlich wollte, aber eigentlich ist es noch viel eleganter. Nur recht kompliziert... Danke trotzdem.

Aber grundsätzlich: mein erstes Script funktioniert ja so, wie ich es gerne hätte. Das zweite stellt ja "nur" ein zweites Auswahlgadget mit einer weiteren Kategorie dar. Später sollen dann noch 2-3 weitere Kategorien angezeigt werden. Geht dies tatsächlich nicht so einfach, wie ich mir das vorstelle? Also, die Anzeige funktioniert ja, aber eben nicht mehr das Javascript, sobald ich das zweite Gadget einbaue.
 
Zuletzt bearbeitet:
So, meine Lösung:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
   function formHandler(form){
       window.location.href = form.options[form.selectedIndex].value;
   }
</SCRIPT>
</HEAD>

<BODY>
   <form name="form">
<select size=1 onChange="javascript:formHandler(this)">
<option value="domain.de">Domain</option>
<option value="http://www.amiga-news.de">Amiga-News</option>
</select>

<select size=1 onChange="javascript:formHandler(this)">
<option value="">Konsole</option>
<option value="http://www.areagames.de">AreaGames Forum</option>
<option value="http://www.planetds.de">Planet DS</option>
          </select>
   </form>
</body>
</html>
 
Sorry wenn meine Lösung nicht 100%ig gepasst hat. Ich habe die mal bei einem Kunden benutzt und der fand es ganz gut - ich nach kurzer Einarbeitung auch.

Danke, dass Du Deine fkt. Lösung hier postest, das ist sehr nett für denjenigen, der in Zukunft ein ähnliches Problem hat.

2nd
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten