Keyup attribute 'name' change not working

Question

Hey guys, I've got what I imagine is a simple question, but for some reason, I can't get it working right.

Expected Behavior: I type characters into a field, and, through a function, those characters are translated into the value of the name HTML attribute.

Actual Behavior: Reflected in Firebug, the value doesn't change or update.

The Code:

$('input').live('keyup', function() {
    var name_value = $(this).val().toLowerCase();
    $(this).attr('name', name_value);
});

Just a side note: I'm using .live() because the element can be cloned, and those clones need to also be able to take on the properties of this .keyup event.

Any ideas?

Answer 1

in most cases you should put a die() function before live so it kills any previous function ... so your code should look like

$('input').die().live('keyup', function() {
        var name_value = $(this).val().toLowerCase();
        $(this).attr('name', name_value);
    });

hopw this does the trick for you .

Answer 2

I have to agree with the comments that is is a particularly odd request, but that being said...what you have already works, it's the monitoring tools that aren't updating, not the DOM, it's working correctly.

The easy way to test this is to .serialize() the <form> and see what you get, to debug and see it, do this:

$("form").submit(function() {
    alert($(this).serialize());
    return false;
});

You can see a working demo here, works in Chrome, FireFox and IE8.