Question

I don’t want to use an <input type=submit /> button to submit a form and I am instead using an <a> element. This is due to styling requirements. So I have this code:

myButton.addEvent('click', function() {
    document.id('myForm').submit();
});

However, I have also written a class that improves and implements the placeholder attribute on inputs and textareas:

var FDPlaceholderText = new Class({
    Implements: Events,
    initialize: function() {

        var _self = this;
        var forms = document.getElements('form');        

        forms.each(function(form) { // All forms
            var performInit = false;
            var i = 0;
            var ph = [];
            form.getElements('input, textarea').each(function(el) { // Get form inputs and textareas
                if (el.getProperty('placeholder') != null) { // Check for placeholder attribute
                    performInit = true;
                    ph[i] = _self.initPlaceholder(el); // Assign the placeholder replacement to the elements
                } 
                i ++;
            });

            if (performInit) {
                _self.clearOnSubmit(form, ph);
            } 
        });

    },
    clearOnSubmit: function(form, ph) {
        form.addEvent('submit', function(e) {
            ph.each(function(el) {
                if (el.value == el.defaultValue) {
                    el.value = '';
                }
            });
        });
    },
    initPlaceholder: function(el) {

        el.defaultValue = el.getProperty('placeholder');
        el.value = el.getProperty('placeholder');

        el.addEvents({
            'focus': function() {
                if (el.value == el.defaultValue) el.value = '';          
            },
            'blur': function() {
                if(el.value.clean() == ''){ 
                    el.value = el.defaultValue;
                }
            }
        });

        return el;
    }
});

window.addEvent('domready', function() {
    new FDPlaceholderText();
});

The above class works great if a form is submitted using an actual <input type=submit /> button: it listens for a submit and clears the inputs values if they are still the default ones therefore validating that they are essentially empty.

However, it seems that because I am submitting one of my forms by listening to a click event on an <a> tag the form.addEvent('submit', function(e) { isn’t getting fired.

Any help is appreciated.

Answer 1

well you can change the click handler to fireEvent() instead of call the .submit() directly:

myButton.addEvent('click', function() {
    document.id('myForm').fireEvent('submit');
});

keep in mind a couple of things (or more).

1. placeholder values to elements that lack placeholder= attribute is pointless
2. if you detect placeholder support, do so once and not on every element, it won’t change suddenly midway through the loop. you can go something like var supportsPlaceholder = !!('placeholder' in document.createElement('input')); – remember, there is no need to do anything if the browser supports it and currently, near enough 60% do.
3. you can otherwise do !supportsPlaceholder && el.get('placeholder') && self.initPlaceholder(el); – which avoids checking attributes when no need
4. when the form is being submitted you really need to clear placeholder= values in older browser or validation for ‘required’ etc will fail. if validation still fails, you have to reinstate the placeholder, so you need a more flexible event pattern
5. avoid using direct references to object properties like el.value – use the accessors like el.get('value') instead (for 1.12 it’s getProperty)

for more complex examples of how to deal with this in mootools, see my repo here: https://github.com/DimitarChristoff/mooPlaceholder