Question

Hi I have a form with a combo box for managing multiple types of addresses:

http://jsfiddle.net/JjH3x/

When a new address is added then the fields are enable in order to enter the address information and so on. I would like to add an icon checkmark or something to the combo address type when the address type has been added or filled out, so the user know what address types in the combo already have data.

Any help would be very appreciated.

Thanks a lot

Answer 1

I have forked your jsFiddle and made you an example of how to accomplish a such thing – you can find it here: http://jsfiddle.net/Mw2qr/

Some of the changes I made include:

• Adding a new computed observable to your Address function objects called isComplete ( this is the one checking if all of the fields in the address contains something – you can improve / extend the logic if needed )
• I have added valueUpdate:'afterkeydown' to your form in order to get instant validation.
• Finally, I have added some example output of which addresses are complete and which are not.

Beware though that you should not only rely on client side logic to check if all the addresses are filled out – make sure you include some server side logic for that as well 😉

— UPDATE

To answer the specific part of the question regarding how to apply color ( or any CSS style ) to the select option elements representing addresses that are “filled out”, I made a couple of adjustments of the initial jsFiddle – the final result is available here: http://jsfiddle.net/Mw2qr/1/

Beware that this might be my biggest hack of the year – it seems that doing what you want has to involve a bit jQuery magic ( I was hoping this could be solved using pure knockoutJS – but as far as I can tell by reading about the options binding in the documentation, what you want to achieve is not supported out of the box – however, my simple hack should work though. It is by no means pretty, so I hope you might ( at least ) be inspired by my solution and maybe come up with something more elegant 😉