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

Formular und JavaScript

ineedmny

ineedmny

Mitglied
Hallo Zusammen,

ich stehe gerade irgendwie auf dem Schlauch. Ich habe ein Formular mit mehreren Divs. Wenn man auf ein Div klickt, wechselt ein Bild innerhalb des Divs von aktiv nach inaktiv und umgekehrt.

Dazu wird noch ein Hidden-Feld von 1 auf 0 gesetzt und ebenfalls umgekehrt.

Jedes Div hat also ein eigenes Bild und ein eigenes Hidden-Feld.

Das funktioniert soweit auch gut, nur ist mir jetzt aufgefallen, dass beim Betätigen des Zurück Buttons des Browsers, alle Bilder wieder im Ursprungszustand sind, aber die Werte sind weiterhin in der Post-Variable gespeichert.

D.h. wenn man auf Zurück klickt und doch noch etwas ändern möchte, sind alle Bilder wieder wie beim ersten Aufruf der Seite. Wenn jetzt ein Div angeklickt wird, ändert sich zwar wieder das Bild, aber der Wert verändert sich dementsprechend falsch.

Gibt es dafür vielleicht eine bessere Möglichkeit sowas zu lösen?

Für Ratschläge bin ich Euch sehr dankbar!

Grüße


Gesendet von iPhone mit Tapatalk
 
Werbung:
Wenn die Werte in der Post-Variablen noch gespeichert sind, könntest Du dann nicht den Zustand der Bilder und Hidden-Felder auf Grund dieser Variablen wiederherstellen (im DOM-ready)?
 
Danke für deine Antwort.

Ich kann mir schon vorstellen, wie du das meinst, aber wie genau initialisiert man im DOM-ready?

Ich bring mir die Programmierung mit JavaScript/Html gerade selber bei, daher fehlt mir da etwas die Praxis.


Gesendet von iPhone mit Tapatalk
 
Werbung:
Okay ich hab schon was dazu gefunden. Kann es leider erst heute Abend testen...

window.onload = function()
{
document.forms['form1'].elements['hidden_field'].value = "Hallo";
}

Damit kann ich schon mal den Wert des Hidden-Felds setzen. Jetzt stellt sich mir nur die Frage, wie ich ohne PHP auf die Post-Variable zugreifen kann UND ob window.onload überhaupt nochmal aktiv wird, wenn man den zurück Button betätigt hat!?


Gesendet von iPhone mit Tapatalk
 
Die Post-Variablen werden ja beim Submit aus den Eingabefeldern erzeugt und Du kannst sie dort auslesen, indem Du die Felder über ihre Namen adressierst:
Code: 
document.name_deines_formulars.name_deines_eingabefeldes.value
bzw. in der Form wie Du es oben mit dem Hiddenfield gemacht hast.
ob window.onload überhaupt nochmal aktiv wird, wenn man den zurück Button betätigt hat!?
Zum Vergrößern anklicken....
Das ist eine gute Frage und anscheinend ist es nicht der Fall. Es scheint jedoch dafür eine Lösung zu geben, die Du hier
http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button
unter Nr. 24 nachlesen kannst:
Code: 
document.onreadystatechange = function () {
    if (document.readyState == 'loaded' || document.readyState == 'complete') {
        alert("complete");
    }
}
 
Zuletzt bearbeitet von einem Moderator:
So, jetzt hab ich mich ganz schön verkünstelt :)

Danke für deine Hilfe Sempervivum!

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ChangeImageOnClick</title>
</head>
<body>

<script type="text/javascript">

deactivated = "http://png-3.findicons.com/files/icons/2833/flatastic_part_1/128/add.png";
activated = "http://png-3.findicons.com/files/icons/2833/flatastic_part_1/128/delete1.png";

// Bei Seitenaufruf, oder nach zurückkehren ausführen
document.onreadystatechange = function ()
{
    if (document.readyState == 'loaded' || document.readyState == 'complete') {
        // image1 aktualisieren
        update_image('1');
    }
}
               
// Wird beim Klick auf das DIV aufgerufen
function set_hidden_field(ID)
{
    // hidden_field aktiv
    if(document.getElementById("hidden_field_"+ID).value == 1) {
       
        // hidden_field deaktivieren
        document.getElementById("hidden_field_"+ID).value = 0;
        document.getElementById("image"+ID).src = deactivated;
       
    // hidden_field inaktiv
    } else if(document.getElementById("hidden_field_"+ID).value == 0) {
       
        // hidden_field aktivieren
        document.getElementById("hidden_field_"+ID).value = 1;
        document.getElementById("image"+ID).src = activated;
   
    }
}

// Wird beim Anzeigen der Seite aufgerufen
function update_image(ID)
{
    // hidden_field war aktiv
    if(document.getElementById("hidden_field_"+ID).value == 1)
    {
        // Bild "activated" anzeigen
        document.getElementById("image"+ID).src = activated;
    }
    // hidden_field war inaktiv
    else if(document.getElementById("hidden_field_"+ID).value == 0)
    {
        // Bild "deactivated" anzeigen
        document.getElementById("image"+ID).src = deactivated;
    // Seite das erste mal aufgerufen
    } else {
       
        // hidden_field deaktivieren
        document.getElementById("hidden_field_"+ID).value = 0;
        document.getElementById("image"+ID).src = deactivated;
    }
}

</script>

<form name="form1" method="post" action="http://www.google.de">
                          
    <input id="hidden_field_1" name="hidden_field_1" type="hidden"/>
   
    <div style="background-color:#B4B4B4" onclick="set_hidden_field('1')">
        <center><b><font size="+3">HIER KLICKEN!</font></b></center>
    </div>
   
    <br>
    <br>
   
    <div align="center"><img name="image1" id="image1"/>
        <br>
        <br>
           <input type="submit" value="weiter"/>
    </div>
                       
</form>

</body>
</html>



Viel Spaß!!! :D
 
Werbung:
So, jetzt hab ich mich ganz schön verkünstelt ... Viel Spaß!!!
Zum Vergrößern anklicken....
??? Was willst Du damit jetzt sagen? Funktioniert es oder funktioniert es nicht? Und wenn nicht, dann erkläre kurz, was dieser Code bezwecken soll.
 
Zuletzt bearbeitet von einem Moderator:
Hast du deine Tage?? :D:D:D

Ich denke dabei an andere, die nach so einer Lösung suchen!

Du könntest den Code ja auch einfach kopieren und ausprobieren, dann siehst du was er bezwecken soll. ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben