JS - Form Prefilled Event

by Ryan Morris

HTML

<h1>Header</h1>

<p id="myId">Paragraphs</p>

<form>
    
    <input type="text" name="f1" placeholder="Username" />
    <input type="text" name ="f2" value="prefilled" />
    
</form>

CSS

.prefilled{
    
    border:1px solid #000;
    background-color:#ccc;
    
}

JavaScript

//var el = document.getElementById("myId");

var prefilledBehavior = (function() {
    
    var formEls = [];
    var length = 0;
    
    function init(config) {
         
        console.log(config);
        
        formEls = document.getElementsByTagName("input");
        
        length = formEls.length;
        
        for (var i=0; i<length; i++) {
            
            if (formEls[i].value) {
                
                formEls[i].className = "prefilled";
                formEls[i].setAttribute("data-original", formEls[i].value);
                
            }
            
            formEls[i].addEventListener('input', function(e) {
               
                if (this.value == this.getAttribute("data-original")) {
                    this.className = 'prefilled';
                    
                } else {
                     this.className = '';   
                }
                
            });
            
        }
        
    }
    
    return {
        init: init
    };
    
}());

prefilledBehavior.init({
    form: "#form1",
    fieldTypes: [
           "input", "select" 
    ]
});