Input changed

[Nime]

I need to hilite text or mark textbox if it's original value has changed (in a form). I may change the text color or textbox's class to notice (like editable datagrid's small triangle). I can compare txtMemberName.Text and Member.Name to decide if value changed or not.

1.) I want to enable/disable save button.
2.) User would notice the changed inputs easily.

Do you suggest any cool tip? Thanks.

[geoffrey.mcgill]

Hi Nime,

Can you post a simplified .aspx code sample demonstrating the scenario and how you have the controls configured?


Sounds like you need to add a Listener to the TextFields <Change> event.

[Nime]

Imagine a simple form which one has two textboxes (with values) and a button. You right I think I have to write a listener function which one checks if original value changed. Maybe it increases the changed fields counter and enables the (save) button. When the value turns back to original, function decreases the counter, if counter is zero then disables the button. Or, it simply scans all values when one of them changed then enables/disables button.

I found the css class="x-grid3-dirty-cell" and modified:

    txtMemberName.Cls = "x-grid3-dirty-cell";



    .x-grid3-dirty-cell {background-color:#EEBBEE;}

Alternatively, I also modified invalid_line.gif and saved as changed_line.gif (in color blue).

.x-form-changed,textarea.x-form-changed{
background:#fff url("img/changed_line.gif") repeat-x bottom;border:1px solid #dd7870;
}

Is there any simple way to add a common listener, there are a lot textboxes... I prefer code behind.

[Nime]

var hiliteChanged = function(id, value) {
    var el = document.getElementById(id);
    if (el.value != value) {
        el.addClass('x-grid3-dirty-cell');
    }
    else 
    {
        el.removeClass('x-grid3-dirty-cell');
    }
}

    //This doen't work; must be hilite if original value changed
    fn = String.Format("hiliteChanged(el.id,'{0}');", Member.Name);

    //This line hilites on any change
    fn = "this.getEl().addClass('x-grid3-dirty-cell');";

    txtUyeAdi.Listeners.Change.Handler = fn;

[Nime]

var hiliteChanged = function(id, value) {
    var el = document.getElementById(id);
    if (el.value != value) {
        el.addClass('x-grid3-dirty-cell');
    }
    else 
    {
        el.removeClass('x-grid3-dirty-cell');
    }
}

    //This doen't work; must hilite if original value changed
    fn = String.Format("hiliteChanged(el.id,'{0}');", Member.Name);


    //This line hilites on any change
    fn = "this.getEl().addClass('x-grid3-dirty-cell');";


    txtUyeAdi.Listeners.Change.Handler = fn;