Happy Happy - 1 month ago 7
HTML Question

Enable save button on change of input box

I am breeze entity manager to check if there are changes made to entity. So i declare observable

isSomeChanged = ko.observable()


Then i tie value like this

isSomeChanged(datacontext.hasChanges());


Html is

<button data-bind="click: SaveData, enable: isSomeChanged() "> Save</button>


So now if i changed something in my page then it enables or disables button. But if i type something in input then button is enabled only when i tab out and not as soon as i typed.

How can i enable save button as soon as something is typed?

Answer

Make sure your isSomeChanged observable is updated when the breeze EntityManager's hasChanges property changes:

isSomeChanged = ko.observable();

// update the isSomeChanged observable when the hasChangesChanged event fires.
entityManager.hasChangesChanged.subscribe(
    function(changeArgs) {
        isSomeChanged(changeArgs.hasChanges);
    });

Ensure your input's value binding has a corresponding valueUpdate parameter set to "input". This will cause each change to the input is written to the entity property immediately instead of when the input loses focus.

<input data-bind="value: entity.FirstName, valueUpdate: 'input'" />

Also, your button's enable binding can be expressed like this (no need for the parens):

<button data-bind="click: SaveData, enable: isSomeChanged">Save</button>