CODEWITHSUNDEEP
javascriptjqueryhtmlinputtags
Swen
Swen

Reputation: 787

Add tags to input field with buttons

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.

Upvotes: 0

Views: 296

Answers (2)

Stuart
Stuart

Reputation: 9858

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);​

Upvotes: 1

Pixou
Pixou

Reputation: 1769

html checkbox seems to fit your need, no ? you have to modify the form and replace the text-area with checkbox (dirty but simple)

Upvotes: 0

Related Questions