<Div> Element einblenden und nach speichern eingeblendet lassen

[CreativPur]

Hi,
ich habe hier ein kleines Script, welches ich gern umbauen würde..

<a href="" onclick="javascript:show('divText'); return false">
Einblenden / Ausblenden</a>
<div style="display: none" id="divText">Formular......</div>

<script>
function show(id) {
    if(document.getElementById) {
        var mydiv = document.getElementById(id);
        mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
    }
}
</script>

Und zwar kommt in das <Div>-Element ein Formular.
In diesem Formular möchte ich bestimmte Änderungen vornehmen und auf der gleichen Seite speichern, um das geänderte Resultat zu sehen.
das Resultat ist auch auf der gleichen Seite.
Logischerweise schließt sich das <Div>-Elemt dann immer beim Speichern.
Wie kann ich erreichen, dass es offen bleibt, und nur per Schließbutten wieder geschlossen wird ?

Vielen Dank für Eure Hilfe

 

[Sempervivum]

Wenn ich das richtig verstehe, müsste es dein Problem lösen, wenn Du die Formulardaten über Ajax an den Server schickst. Da gibt es ein Plugin, das das unterstützt:
http://jquery.malsup.com/form/

 

[Jan-Frederik Stieler]

Hi,

nochmal zum Verständnis. Bei Klick auf den Link wird das Formular angezeigt und erneutem Klick ausgeblendet.
Soll während dem schließen das Formular wieder geleert werden oder sollen die Formulardaten bestehen bleiben?
Grundsätzlich, wenn Du beim Eintragen die Daten auf direkt irgendwo ausgeben willst kannst Du das Output-Element verwenden.
Ich hab erst vor kurzem eine Funktion dafür geschrieben. Ist aber jQuery:

function fillOutput(){
    const vkInputs = $('.form-control');
    const vkOutput = $('.vkoutput');

    let vkInputLength = vkInputs.length;
    let vkOutputLength = vkOutput.length;

    for (i = 0; i < vkInputLength; i++) {
        let vkInputID  = '#' + vkInputs[i].id;
        let vkOutputID = vkInputID.replace('Input', 'Output');

        $(vkInputID).on('keyup keydown', function(){
            $(vkOutputID).text($(this).val()).css({display: 'block'});
        });
    }
}

und dann speichern oder wenn Du aber das Formular ausfüllen willst mit speichern und dann die erst die Ausgabe bekommen willst würd ich das ganze auch per Ajax machen, bzw. das Speichern immer per Ajax.
Ajax ist halt per jQuery etwas einfacher als per vanilla JS. Aber ein jQueryformular benötigstDu da eigentlich nicht.

function getForm(){
    $('#form').on('submit', function(e){
        e.preventDefault();

        let form = $(this);

        $.ajax({
            type: 'POST',
            url: form.prop('action'),
            data : form.serialize(),
            dataType: 'json',
            encode: true
        })
        .done(function(response) {
            console.log('success');
        })
        .fail(function(response) {
            console.log('error');
        })
        .always(function(response) {
            console.dir(response);
        });
    });
}

Dann musst Du auf php-Seite das JSON in deine Datenbank schreiben und gibst einfach das JSON wieder als Response zurück und kannst es per JS verarbeiten.

Grüße