I am trying to data bind a form element in knockout.js. However I don't want the element to be editable in the form, or even display the element to the user.
I'm able to correctly data-bind the value to an input element. But I would prefer if I could just pull the value from the HTML or a labels text, or a span. So the below works, but I'm not able to change it so it's not an input that the user can change.
<input id="txtProvider" name="txtProvider" type="text" data-bind="value: $root.session().Resource().provider" />
I tried just using a hidden element with a placeholder, but this didn't work.
<input id="txtProvider" name="txtProvider" type="hidden" placeholder="WebEx" data-bind="value: $root.session().Resource().provider" />
Any suggestions?
Thanks in advance for the help.
What you're doing works, or should work, fine:
<form>
<input type="hidden" data-bind="value: myHiddenVal" />
</form>
function ViewModel() {
self.myHiddenVal = ko.observable('Foo');
}
ko.applyBindings(new ViewModel());
This will yield:
<input type="hidden" data-bind="value: myHiddenVal" value="Foo">
Example: https://jsfiddle.net/thebluenile/myves32x/
Though I have to say, I of course don't know your exact use case, but "pulling values from HTML elements" is sort of antithetical to how Knockout, or any other data binding framework, works. If the user doesn't have to edit the field you can just keep it out of the UI altogether. The only valid use case for hidden elements I can think of would be if you were submitting the form to a server side script for processing, instead of sending its contents via AJAX.