Redacted/Updatable Fields (one-way)

by Town

HTML

<input type="text" data-redacted-value="The redacted text" disabled="disabled" /><div class="redacted">R</div>

<input id="submit" type="submit" value="Save Changes" />

CSS

input { float: left;}
.redacted {width: 20px; height: 20px; color: #fff; background: #000; font-weight: bold; text-align: center; float: left; position: relative; top: 3px; cursor: pointer;}
#submit {clear: both;}

JavaScript

$(function() {
    
    var textbox = $('input:text');
    
    $('.redacted').click(function() {
        var rusure = confirm("This action will overwrite the existing value for this field with the value you specify in the form - are you sure you wish to do this?");
        if (rusure)
        {
            $(textbox).removeAttr("disabled");
        }
    });

    $('#submit').click(function() {
        alert("The following value will be saved: " + 
              ($(textbox).attr('disabled') !== undefined ? $(textbox).data('redacted-value') : $(textbox).val()));
    });
});