MktoForms2 :: Textarea Char Count

by sanford

HTML

<script src="//static.getclicky.com/js"></script>
<script src="data:text/javascript;base64,dHJ5e2NsaWNreS5pbml0KDEwMDg1MjgyMyk7fWNhdGNoKGUpe30="></script>
<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_298" class="mktoForm"></form>

CSS

label[for="Comments__c"][data-chars-remaining]:after {
    content: attr(data-chars-remaining) " chars remaining";
    display: block;
    font: 11px/11px Georgia;
    font-style: italic;
}

JavaScript

MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 298,
    function(form) 
    {
        var formEl = form.getFormElem()[0],
            textareaEls = formEl.querySelectorAll('textarea');

        for ( var i = 0, imax = textareaEls.length; i < imax; i++ ) {

            var textareaEl = textareaEls[i],
                labelEl = formEl.querySelector('label[for="'+textareaEl.id+'"]');
    
            textareaEl.addEventListener('keyup',function(e)
            {         
                this.label.setAttribute('data-chars-remaining', this.field.getAttribute('maxlength') - this.field.value.length); 
            }.bind({field: textareaEl,label: labelEl}));
        
        }
        
        form.onSubmit(function(form)
        {
            // stops demo form from submitting - omit from your prod code!
            form.submittable(false);
        })        
    });