Question

I have two input text fields. One is for entering the title of the article and one is for the permalink of the article. What I’m wanting to do is have the permalink field disabled until text is inserted into the title field and when the user takes focus out of the title field then it runs a custom regex to replace spaces with hyphens and lowercases any uppercase letters.

<input type="text" id="title" name"title" />
<input type="text" id="permalink" name="permalink" />

Answer 1

It’s real easy with jQuery…

var permalinkInput = $('#permalink');

$('#title').change(function() {
    permalinkInput.prop('disabled', !$(this).val());
}).change().blur(function() {
    $(this).val(function(i, value) {
        return value.replace(/\s+/g, '-').toLowerCase();
    });
});​

jsFiddle.

If you don’t have jQuery but only need to support standards-compliant modern browsers, it’d be…

var permalinkInput = document.querySelector('#permalink'),
    titleInput = document.querySelector('#title');

permalinkInput.disabled = true;

titleInput.addEventListener('change', function() {
    permalinkInput.disabled = !titleInput.value;
}, false);

titleInput.addEventListener('blur', function() {
    titleInput.value = titleInput.value.replace(/\s+/g, '-').toLowerCase();
});​

jsFiddle.

If you didn’t have jQuery and had to support our old IE friends, it’d look like…

var permalinkInput = document.getElementById('permalink'),
    titleInput = document.getElementById('title');

var addEvent = function(element, type, callback) {
    if (element.addEventListener) {
        element.addEventListener(type, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, callback);
    } else {
        element['on' + type] = callback;
    }
}

permalinkInput.disabled = true;

addEvent(titleInput, 'change', function() {
    permalinkInput.disabled = !titleInput.value;
});

addEvent(titleInput, 'blur', function() {
    titleInput.value = titleInput.value.replace(/\s+/g, '-').toLowerCase();
});​

jsFiddle.

Note that the old fallback for event registration is to assign the on* property. This will overwrite any previous property assigned there.

If you really wanted to register multiple events for these ancient browsers, you’d modify the property assignment to use a custom handler which registered and then triggered multiple events when required.