Excel VBA - Changing the value of an input field

Question

I am relatively new to excel vba and trying to achieve the following:

I know that there are a lot of similiar questions online, but I tried to find a solution and failed. I want to use vba to log into a website. Therefore I need to enter an email adress and a password. However, somehow if I change the value of the fields, the website is still waiting for text input?? Am I doing anything wrong?

This is the Html of just the login field:

<div class="login">
    <div class="top">
        <a class="sprd-link" ng-href=""><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 32 32" key="sprd-heart">
    <!----><!----><!---->
    <!----><!---->
<path d="M 21.1 3.8 L 16 9 l -5.1 -5.1 l -9.6 9.6 L 16 28.2 l 14.8 -14.7 l -9.7 -9.7 Z M 16 23.7 L 5.7 13.4 l 5.1 -5.1 l 5.2 5.2 l 5 -5.1 l 5.1 5.1 L 16 23.7 Z" /></svg></a>
    </div>
    <div class="login-container">
        <div class="left">
            <div>
                <h1 class="text-center">Log in to your account</h1>
            </div>
        </div>
        <div class="right">
            <img class="rocket" src="/images/rocket_launched.png">
            <login-form><div class="login-form" ng-class="{'login-error': vm.loginError}">
    <form name="loginForm" class="ng-pristine ng-invalid ng-invalid-required" novalidate="" ng-submit="vm.login()" data-dpmaxz-fid="1">
        <p class="login-field has-error" ng-class="{ 'has-error' : (loginForm.username.$touched || loginForm.$submitted) &amp;&amp; loginForm.username.$error.required }">
            <sprd-label-input><div class="label-input-wrapper" ng-class="{'active': focused || !!inputValue.length || !!modelValue.length || placeholderExists, 'filled': inputValue.length || modelValue.length}" ng-transclude="">
                <label for="loginUsername">Email or username</label>
                <input name="username" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" id="loginUsername" autofocus="" required="" type="text" ng-change="vm.loginDataChange()" sprd-form-autofill="" ng-model="vm.credentials.username" data-dpmaxz-eid="1">
                <small class="error-info error-info-name">
                    Please enter your e-mail address and user name.
                </small>
            </div></sprd-label-input>
        </p>
        <p class="login-field password" ng-class="{ 'has-error' : loginForm.password.$error.required &amp;&amp; (loginForm.password.$touched  || loginForm.$submitted) }">
            <sprd-label-input><div class="label-input-wrapper" ng-class="{'active': focused || !!inputValue.length || !!modelValue.length || placeholderExists, 'filled': inputValue.length || modelValue.length}" ng-transclude="">
                <label for="loginPassword">Enter password</label>
                <input name="password" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" id="loginPassword" required="" type="password" ng-change="vm.loginDataChange()" sprd-form-autofill="" ng-model="vm.credentials.password" data-dpmaxz-eid="2">
                <small class="error-info error-info-name">
                    Please enter your password.
                </small>
            </div></sprd-label-input>
        </p>
        <div class="login-field sprd-checkbox-item" ng-click="vm.credentials.rememberMe = !vm.credentials.rememberMe">
            <sprd-checkbox class="pull-left" checked="vm.credentials.rememberMe"><div class="sprd-checkbox-container">
    <!---->

    <!----><button class="sprd-checkbox" type="button" ng-class="{'active': checked}" ng-if="model == undefined" ng-disabled="disabled">
        <div><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" key="accept">
    <!----><!----><!---->
    <!----><!---->
<path d="M 13.3 3.1 l -7.1 7 l -3.5 -3.5 L 1.3 8 l 4.9 4.9 l 8.5 -8.4 Z" /></svg></div>
    </button><!---->
</div>
</sprd-checkbox>
            <div class="sprd-checkbox-label">Stay logged in on this device.</div>
        </div>
        <p class="login-submit">
            <button disabled="disabled" class="btn btn-primary btn-block" id="login-button" type="submit" ng-disabled="vm.loginDisabled || loginForm.$invalid">Login</button>
        </p>
        <a class="link" id="forgot-link" href="https://www.spreadshirt.com/password?redirectBack=true" ng-href="https://www.spreadshirt.com/password?redirectBack=true">Forgot your username or password?</a>
    </form>




    <!---->
</div>
</login-form>
            <div class="register-link-container">
                <span>Don't have an account?</span>
                <a class="link register-link" href="#" ng-click="NavbarCtrl.backToRegisterOrLandingPage()">Register now</a>
            </div>
        </div>
    </div>
</div>

I already tried using the following method, but this didn't work as the website doesnt seem to accept it input.

objIE.document.getElementByID("loginUsername").value = userName

I was successful with the sendKeys option, but I would prefer to avoid it.

objIE.document.getElementByID("loginUsername").click
objIE.document.getElementByID("loginUsername").focus
application.sendKeys(userName)

The original Website Url is the following:

https://partner.spreadshirt.com/login

Thank you very much for any help you can give!

Answer 1

The following worked for me.

Option Explicit

Public Sub Login1()
    Dim IE As Object, html As Object
    Const EMAIL = "joe.bloggs@internet.com"
    Const PASSWORD = "not_today"
    Set IE = CreateObject("internetexplorer.application")

    With IE

        .Visible = True
        .navigate "https://partner.spreadshirt.com/login"

        While .Busy = True Or .readyState < 4: DoEvents: Wend

        Set html = .document

        html.querySelector("#loginUsername").innertext = EMAIL
        html.querySelector("#loginPassword").innertext = PASSWORD

        Dim b As Object
        Set b = html.querySelector("#login-button")
        b.disabled = False
        b.Click

       ' .Quit

    End With

End Sub