smam/front/form.js

function generateForm(id) {
    var el = document.getElementById(id);
    
    var input = {
        name: getField('form_name', 'Your name', false, 'input'), // TODO: configurable prefix
        addr: getField('form_addr', 'Your e-mail address', true, 'input'),
        subj: getField('form_subj', 'Your message\'s subject', false, 'input'),
        text: getField('form_text', 'Your message', false, 'textarea')
    };
    
    // Adding nodes to document
    
    el.appendChild(input.name);
    el.appendChild(input.addr);
    el.appendChild(input.subj);
    el.appendChild(input.text);
    
    // Adding submit button
    
    el.appendChild(getSubmitButton('form_subm', 'Send the mail'));
}


// Returns a form field
// id: field HTML identifier
// placeholder: placeholder text
// email: boolean: is it an email field?
// type: 'input' or 'textarea'
// return: a div node containing a label and an input text field
function getField(id, placeholder, email, type) {
    var field = document.createElement('div');
    
    field.setAttribute('id', id); // TODO: configurable prefix
    field.appendChild(getLabel(id, placeholder, type));
    field.appendChild(getInputField(id, placeholder, email, type));
    
    return field;
}


// Returns a label
// id: field HTML identifier
// content: label's inner content
// type: 'input' or 'textarea'
// return: a label node the field's description
function getLabel(id, content, type) {
    var label = document.createElement('label');
    
    label.setAttribute('for', id + '_' + type);
    label.innerHTML = content;
    
    return label;
}


// Returns an input text field
// id: field HTML identifier
// placeholder: placeholder text, field description
// email: boolean: is it an email field?
// type: 'input' or 'textarea'
// return: an input text or email field (depending on "email"'s value') with an
//         HTML id and a placeholder text
function getInputField(id, placeholder, email, type) {
    var input = document.createElement(type);
    
    if(!type.localeCompare('input')) { // Set input type if input
        if(email) {
            input.setAttribute('type', 'mail');
        } else {
            input.setAttribute('type', 'text');
        }
    }
    
    input.setAttribute('required', 'required');
    input.setAttribute('placeholder', placeholder);
    input.setAttribute('id', id + '_' + type);
    
    return input;
}


// Returns a submit button
// id: button HTML identifier
// text: button text
// return: a div node containing the button
function getSubmitButton(id, text) {
    var submit = document.createElement('div');
    
    submit.setAttribute('id', id);
    
    var button = document.createElement('button');
    
    button.setAttribute('type', 'submit');
    button.setAttribute('id', id);
    // Disable button's default action
    button.setAttribute('onSubmit', 'return false;');
    
    button.innerHTML = text;
    
    submit.appendChild(button);
    
    return submit;
}