Skjema som husker

Av og til kan det være greit at skjema husker hva som er fylt inn, slik at enten verdien står der fra gang til gang, eller huskes dersom brukeren navigerer seg bort fra skjema. Her er et relativt enkelt javascript/jQuery for å gjøre dette.

Alt du trenger å gjøre er å legge inn javascriptet og legge på klasser på de feltene du ønsker at skal huskes.

Følgende klasser benyttes:

stored - Legges på felt som lagrer tekst, telefonnummer, epost etc,

storedcheck - Denne klassen legges rett på checkboksene.

storedselect - Legges på nedtrekkslister, ikke på select med flere verdier.

Dersom en ønsker å benytte funksjonaliteten på alle felt, kan en bytte ut klassenavnene i javascriptet med mer generelle betegnelser. F.eks. kan en bare skrive "select" i stedet for ".storedselect".

<script>
    //Huske skjemafelt
    $(document).ready(function () {
        $(".stored").each(function () {
            LoadStoredValue($(this).attr('id'));
        });

        $(".storedcheck").each(function () {
            LoadStoredCheck($(this).attr('id'));
        });

        $(".storedselect").each(function () {
            LoadStoredSelect($(this).attr('id'));
        });
    });


    $('.stored').keyup(function () {
        localStorage[$(this).attr('id')] = $(this).val();
    });

    $('.stored').blur(function () {
        localStorage[$(this).attr('id')] = $(this).val();
    });

    $(":checkbox").change(function () {
        localStorage[$(this).attr('id')] = this.checked;
    });

    $(".storedselect").change(function () {
        localStorage[$(this).attr('id')] = $(this).val();
    });

function LoadStoredValue(fieldid) {
    if (localStorage[fieldid]) {
        $('#' + fieldid).val(localStorage[fieldid]);
    }
}

function LoadStoredSelect(fieldid) {
    if (localStorage[fieldid]) {
        $('#' + fieldid).val(localStorage[fieldid]);
    }
}

function LoadStoredCheck(fieldid) {
    if (localStorage[fieldid]) {
        if (localStorage[fieldid] == "true") {
            $('#' + fieldid).prop('checked', true);
        } else {
            $('#' + fieldid).prop('checked', false);
        }
    }
}
</script>