Happy Happy - 1 year ago 104
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


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 Source

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.
    function(changeArgs) {

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download