Is there a way to update an observable when the <input> value is changed, but programatically, i.e. by Javascript?

Here is a jsfiddle of this use case that I am not able to make it work: /

As you see when the "Update input value by Javascript" link is clicked the observable is obviously not updated, since it is not reflected in the <span>

Is there a way to update an observable when the <input> value is changed, but programatically, i.e. by Javascript?

Here is a jsfiddle of this use case that I am not able to make it work: http://jsfiddle.net/qYXdJ/

As you see when the "Update input value by Javascript" link is clicked the observable is obviously not updated, since it is not reflected in the <span>

• javascript
• knockout.js

• 1 This might not help you, but under the hood, updates are detected by change events. Programatically changing the value of an input field does not seem to fire a change event: jsfiddle.net/qYXdJ/3 – apsillers Commented May 1, 2013 at 18:35
• I am a little confused which is probably due to my lack of ko knowledge, but when I click "Update input value by Javascript" after inputting some text, the text appears next to the "The input value is: :", so the <span> is updated. What am I missing? – ron tornambe Commented May 1, 2013 at 18:41
• You should be seeing "The input value is: New Value" instead – tomor Commented May 1, 2013 at 18:42
• tomor - Can you explain the need to change the input's value and not the observables value? – zachzurn Commented May 1, 2013 at 18:50

3 Answers 3

If you absolutely can't modify the observable directly (which is the best way), you can trigger the "onchange" event (which Knockout uses internally). With jQuery, it's a simple matter:

$('#update').on('click', function() {
    $('#input2').val('New Value').trigger('change');
});

If you don't want to use jQuery for whatever reason, have a look at this question.

As cyanfish pointed out the correct way is to update the observable.

If the problem is your code doesn't have access to the observable, for example you're writing a bookmarklet to automatically fill out a form, then you can gain access to the observable like this:

function setValue(input, value) {
  var bindingsString = input.getAttribute('data-bind');
  if (bindingsString) {
    var bindings = ko.bindingProvider.instance.parseBindingsString(bindingsString, ko.contextFor(input), input);
    if (bindings.value) {
      bindings.value(value);
    } else if (bindings.checked) {
      bindings.checked(value);
    } else {
      input.value = value;
    }
  } else {
    input.value = value;
  }
}

You have to change the viewModel 'name' property instead of input field value, because it's observable, and any changes on the property will be reflected to all binded html elements.

var viewModel = {
        name: ko.observable()
    };
    ko.applyBindings(viewModel);

    document.getElementById('update').onclick = function(){
        viewModel.name('New Value');
        //document.getElementById('input2').value = 'New Value';
    }