mit Button id verändern/übergeben // Bootstrap

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

simhil

Neues Mitglied
1 Dezember 2019
2
0
1
23
Servus, ich bin neu hier und hoffe ich habs gleich im richtigen Forum :wink:

Also es geht um folgendes:
Ich habe einen Suchdialog als html Dokument, bei dem ich dann mit hilfe von javascript neue Kontakte anlegen und speichern kann, sowie die gespeicherten verändern kann.
Erst war alles mit js und html und css, nun muss ich mit Bootstrap arbeiten.
In der ersten Version wurde beim Anlegen eines neuen bzw. beim bearbeiten eines bestehenden Kontakts eine neue HTML Seite geöffnet, jeweils das gleiche HTML Dokument. Unterschieden haben sie sich nur dadurch, dass beim Neu Anlegen die id -1 übergeben werden sollte, sodass das Input Feld für den Namen bearbeitet werden konnte (mit js funktion) oder beim Bearbeiten eines neuen Kontakts wurde die jeweilige id(0- unendlich) übergeben, sodass der Name dann nicht mehr bearbeitet werden konnte, alle anderen Felder aber schon.

Damit keine neue Seite geöffnet wird hab ich nun ein Bootstrap modal eingefügt, das öffnet mir beim Klick auf den Neu Anlegen Button auch das Modal. Nur kann ich jetzt nicht mehr den Namen bearbeiten, sprich ich übergebe die id -1 nicht.

Nur mit js und html hab ich das so gelöst:

<button class="button" type="button" onclick="window.location.href='KontaktBearbeiten.html?id=-1'">
<img class="button-image" src="images/plus.png">
</button>

Habe mit dem Button eben KontaktBearbeiten mit der id-1 aufgerufen. In dem HTML Dokument wird dann sofort diese Funktion aufgerufen:


JavaScript:
function kontaktBearbeitenInit() {
    var url = decodeURI(window.location.href);
    var urlParts = url.split("?");
    var idParts = urlParts[1].split("=");
    var id = idParts[1];
    var newText = "Kontakt anlegen";
    var bearbeitenText = "Kontakt bearbeiten";

    document.getElementById('idSaver').value = id;

    if (id === '-1') {
        // Kontakt anlegen
        document.getElementById("titleID").innerHTML = newText;
        document.getElementById("legendID").innerHTML = newText;
        document.getElementById("nameID").disabled = false;
    } else {
        // gültige ID gegeben, Kontakt bearbeiten
        document.getElementById("titleID").innerHTML = bearbeitenText;
        document.getElementById("legendID").innerHTML = bearbeitenText;

        let kontakt = kontakteSpeicher.findeKontaktZuId(id);

        document.getElementById("nameID").disabled = true;
        document.getElementById("nameID").value = kontakt.name;
        document.getElementById("emailID").value = kontakt.email;
        document.getElementById("ortID").value = kontakt.ort;
        document.getElementById("plzID").value = kontakt.plz;
        document.getElementById("strasseID").value = kontakt.strasse;
    }
}

Die Aufgabe ist nun, dass ich dieses KontaktBearbeiten.html eben in meine "main-html" reinkriege (das hab ich schon gelöst) und dann aber auch mit der richtigen id die obenstehende Funktion ausführe.
Ich hoffe das ist einigermaßen verständlich.
LG,
Simon
 

simhil

Neues Mitglied
1 Dezember 2019
2
0
1
23
Das Problem ist jetzt halt, dass es dieses KontaktBearbeiten.html ja nicht mehr gibt, da dass ja in dem modal ist. Somit kann ich das wie oben mit dem Button und Kontaktbearbeiten.html?id=-1 auch nicht mehr lösen..
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
Schau mal, ob dir dies weiter hilft:
Nach unten scrollen zu "Varying modal content ".
Dort wird beschrieben, wie Du das Modal mit Javascript modifizieren kannst, abhängig davon, welcher Button es öffnet.
 
Werbung: