Form Save?

[uudruid74]

Anyone know of a form-saver that works with this? I want the form data to be persistent, but filling in the data via plugins (and likely most any jQuery call) means that the floating label won't display right. It looks like the is-dirty class isn't getting set.

If I have to roll it myself I will, but if anyone knows of a done solution, can you comment it here?

[uudruid74]

$("#select_id").val("newvalue");

Will not change what is displayed in the form, but

$("#select_id").val();

still returns the new value. This causes a huge problem since what the user sees and what we get from the DOM are different. This is why all the auto save stuff fails, and likely compatibility with other libraries. This is a bug.

[uudruid74]

I currently handle this by putting the values back into the form by reading the query string using this nasty bit of hackery (the searchparams object is a global defined elsewhere ...

(function getUrlParameters() {
    console.log("Getting Parameters");
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
    sURLVariables = sPageURL.split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        var is_dirty = '';
        sParameterName = sURLVariables[i].split('=');
        searchparams[sParameterName[0]] = sParameterName[1];
        if ($("#s_"+sParameterName[0]).val() !== sParameterName[1]) {
            $("#s_"+sParameterName[0]).val(sParameterName[1]);
            is_dirty = "is-dirty";
        }
        $("#s_"+sParameterName[0]).parent('div')
            .addClass(is_dirty)
            .find('span.mdl-selectfield__box-value')
            .html($("#s_"+sParameterName[0])
            .find('option[value="' + sParameterName[1] + '"]').html())
        console.log(`${sParameterName[0]} = ${sParameterName[1]}`);
        if (sParameterName[0] == "featured") {
            $("#maintitle").html("Featured Listings");
        }
    }
}());

The id of each field is the query parameter with "s_" prefixed. This keeps the form consistent with the values already present, but doesn't save them in a cookie or in local web storage. Hopefully, we can get better support for the "change" event so that a simple $('#s_xxx').val("newvalue"); will not only change the select field value internally, but also update this display DIV similar to what I did above. Maybe next iteration I'll trigger on the change event, but this way was easier to debug and more efficient for my use case.