Materialize: Form Reset with Prepopulated Text Boxes

[mir4ef]

Hi,

I have a form and some of the text boxes have a default value, for example the first name is prepopulated with the user's info. However, if the user hits the reset button on the form, the label's class 'active' is being removed. Here is a codepen: http://codepen.io/mir4ef/pen/rVOaeY.

I was able to fix it for my particular case in your forms.js file by adding "if ($(this).find(input_selector).val() === '')" on line 40 and recompiling the js files. However, this is not a viable solution, because every time I update the lib with the new version, I have to remember to update and recompile. Could you please take a look at the form reset action and not to remove the class 'active' from inputs that have default values? Thank you!

[patrickcfantato]

Hi,
I solved the problem by calling "Materialize.updateTextFields();" function after the reset event (or on the 'onclick' event).

$("input[type='reset']").on('click', function(){
      this.form.reset(); // forcing reset event
      Materialize.updateTextFields(); //updating labels from inputs
});

or

function clearFocus(){
     Materialize.updateTextFields();
}
<button class="btn waves-effect waves-light" type="reset" onclick="clearFocus();">
     Reset
</button>

But I think that developers could add this in a future release.

[mir4ef]

Hi @patrickcfantato and thank you for the suggestion! Yeah, that worked! Just wondering, is there a documentation for all the methods that you can call or you found it the source code? I didn't find any docs, maybe I missed something...

Yes, I agree, this should be addressed by the developers. However, this doesn't take anything away from their great work.

[patrickcfantato]

@mir4ef i don't know if exist some documentation about that, I just searched the js code and found this solution.

Of Course not, their work is amazing

[mir4ef]

@patrickcfantato as I said in my original post, modifying the source code wasn't a viable option, so I came up with this wild function (which was working just fine surprisingly:)) before your suggestion :))) :

var forms = document.getElementsByTagName('form');
for (var i = forms.length; i--;)
   forms[i].addEventListener('reset', handleFormReset.bind(this), false);
var counter = 0;
var defaultValues = null;
var timer;
function handleFormReset(el) {
    timer = setTimeout(handleFormReset, 10);
    if (defaultValues === null)
        defaultValues = el.currentTarget.getElementsByTagName('input');
    for (var i = defaultValues.length; i--;) {
        if (defaultValues[i].type === 'text' && defaultValues[i].value !== '') {
            for (var j = defaultValues[i].parentNode.children.length; j--;) {
                if (defaultValues[i].parentNode.children[j].tagName.toLowerCase() === 'label')
                    defaultValues[i].parentNode.children[j].classList.add('active');
            }
        }
    }
    if (counter > 0) {
        clearTimeout(timer);
        counter = 0;
        defaultValues = null;
    }
    else
        counter++;
}

but then it just became:

var forms = document.getElementsByTagName('form');
for (var i = forms.length; i--;)
    forms[i].addEventListener('reset', handleFormReset.bind(), false);
function handleFormReset() {
    Materialize.updateTextFields();
}

Thank you again!!!

[acburst]

Fixed in 1fafda8530e3ed6cf18885f3a3b7c83f49675a79

[mir4ef]

awesome! Thank you!

[anandrikka]

Materialize.updateTextFields() - throwing error updateTextFields() is not a function in react