Question

I’m using a plugin for WordPress called WP User Frontend. Basically it allows users to post from the front-end of the website.

There is a feature which allows users to add tags themselves, however, this is just a normal input text field, and I don’t want them to create countless of new tags.

So basically what I want is for them to be able to click on several buttons which will add the tags to the input field, while also disabling their manual input.

Answer 1

You will need a script that converts the checkbox input into whatever format (say, a string of words separated by spaces) was needed for the original tags input. Here is an example script that would both insert the checkboxes to the page underneath the original input and put the resulting values into the original field, ensuring it gets posted the same way. (You could then hide the original field if you don’t want it displayed.) http://jsfiddle.net/zLVTp/8/

var tags = ['cows', 'sheep', 'dogs'],
    inp, label, ch = document.createElement('fieldset'),
    f = document.getElementById('tagField'); 
        // ^ The original input has id=tagField
f.readOnly = true;
for (var i = 0; i < tags.length; i++) {
    inp = document.createElement('input');
    label = document.createElement('label');
    label.innerHTML = tags[i];
    label.htmlFor = 'tag_' + tags[i];
    inp.type = "checkbox";
    inp.name = "tagSet";
    inp.className = 'tagCBs';
    inp.value = tags[i];
    inp.id = 'tag_' + tags[i];
    ch.appendChild(inp);
    ch.appendChild(label);
    inp.onchange = (function() {
        var th = inp;
        return function() {
            var sp, r = [];
            if (th.checked && f.value.indexOf(th.value) == -1) {
                if (f.value == '') f.value = th.value;
                else f.value += ' ' + th.value;
            }
            else if (!th.checked) {
                sp = f.value.split(' ');
                for (var j = 0; j < sp.length; j++) {
                    if (sp[j] != th.value) r.push(sp[j]);
                }
                f.value = r.join(' ');
            }
        }
    })();
}
f.parentNode.appendChild(ch);​