Using VBA, how do I input a value to a text box on a webpage that uses Knockout JS?

Question

I'm trying to populate a form on a webpage that uses Knockout JS. When I insert a value into a particular text box it appears to have taken the value but when I submit the form it retains it's previous value. With a bit of digging around I've discovered that Knockout JS uses data-binding to update the underlying value. When I insert a value into the input text box the Knockout JS is not being triggered and therefore not updating the underlying value. This post is for something similar but with a check box and dropdown box rather than a text box. But I can't figure out how to get it working with a text box.

The actual website I'm trying update requires a login, however I think this page on the Knockout JS Site http://knockoutjs.com/examples/helloWorld.html will suffice for testing purposes.

Basically what I need is, using VBA, to enter a FirstName and LastName in the 2 text boxes (where it currently says 'Planet' and 'Earth'). You should see the 2 input values appear immediately below where it says 'Hello Planet Earth'. Typing it manually into the text boxes works fine. But I just can't get it to work in VBA.

Here' what I have so far...

Sub KnockoutTest()


Dim IE As New InternetExplorer
Dim hDoc As HTMLDocument

IE.Visible = True


'Load webpage and loop until loading is complete.
IE.Navigate "http://knockoutjs.com/examples/helloWorld.html"
Do While (IE.Busy Or IE.ReadyState <> READYSTATE_COMPLETE)
  DoEvents
Loop

Set hDoc = IE.Document

Set firstName = hDoc.getElementsByClassName("liveExample").Item(0).all.Item(1)
Set lastName = hDoc.getElementsByClassName("liveExample").Item(0).all.Item(3)

firstName.Click
firstName.Value = "Joe"
lastName.Click
lastName.Value = "Bloggs"

'Close ie object
Set IE = Nothing
Application.ScreenUpdating = True

End Sub

Anyone got any ideas on how I get the knockout events to fire?

The actual html from the text box on the page I'm trying to update is this....

<input type="text" ondrop="return false;" onpaste="return false;" data-bind="numericValue: Markup, visible: IsCellEditable(), selected: IsCellEditable(), event: { blur: blurZoneMarkup, keypress: function (data, event) { return $parent.isDecimal(data, event, hdnIsDiscount) }, keydown: function (data, event) { $(event.target).data('tabcode', event.which || event.keyCode); { return true; } } }" style="width: 90%; display: none;">

Any help or advice would be much appreciated. I've been trying to solve this for 3 days now!

I've added the following line of code but unfortunately it didn't do anything.... firstName.FireEvent "onblur" — moconnorism, Apr 13 '17 at 19:27

score 0 · Answer 1 · answered Aug 20 '19 at 03:11

Basically, you would need to handle such automated inputs as 'HTMLevents' and trigger them. An updated snippet from your original code:

                    With hDoc
                        Set evt = hDoc.createEvent("HTMLEvents")
                        evt.initEvent "change", True, False
                        firstName.Value = "Joe"
                        firstName.dispatchEvent evt
                    End With

Tested this code and works fine for the website that link that you have provided.

I have done tons of website automations with VBA and the most robust approach is to create one event, specific to each field that you would want to fill, assign a value to the field, and dispatch the event that you have created.

For further information, refer to the documentation on MSDN https://msdn.microsoft.com/en-us/ie/ff975247(v=vs.94)

Using VBA, how do I input a value to a text box on a webpage that uses Knockout JS?

1 Answers1