CODEWITHSUNDEEP
javascriptformsfrontendweb-frontend
Mirek87
Mirek87

Reputation: 11

Why does populating the input field with Javascript not work

During the checkout process on our magento site customers can add a discount code.

This is the relevant code passage:

<div class="payment-option _collapsible discount-code _active">
    <form class="form form-discount" id="discount-form">
        <div class="payment-option-inner">
            <div class="field">
                <label class="label" for="discount-code">
                    <span data-bind="i18n: 'Enter discount code'">Geben Sie den Rabatt-Code ein</span>
                </label>
                <div class="control">
                    <input class="input-text" type="text" id="discount-code" name="discount_code" placeholder="Geben Sie den Rabatt-Code ein">
                </div>
            </div>
        </div>
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action action-apply" type="submit" data-bind="'value': $t('Apply Discount'), click: apply" value="Rabatt anwenden">
                    <span><span>Rabatt anwenden</span></span>
                </button>
            </div>
        </div>
    </form>
</div>

To make things easier for our customers I want to write the dicsount codes into local storage and the automatically populate the discount field for them. This all works fine. However when submitting the form or clicking the button (be this through Javascript or manually in the browser) the form returns an error that the code isn't valid.

Looking at the console, the value of the input field isn't sent along and an empty string is passed on to Magento for verification. Which obviously returns the error message.

Can anyone give any guidance on what I am missing when automatically setting the discount code? This is the relevant passage in the Script:

document.getElementById('discount-code').value = discountCode;
    
var discountSection = document.getElementsByClassName("discount-code")[0];
var discountButton = discountSection.getElementsByClassName("action-apply");
discountButton[0].click()

using submit() will reload the page and lose the discount code so clicking the button seems to be the way to go. Am i missing some process where I need to make the form "realise" that an input was entered?

Upvotes: 0

Views: 126

Answers (1)

artie
artie

Reputation: 129

It looks like you're missing an object with class of discount-code. I see that you use it as a name and an id, but no class, so getElementsByClassName is coming back empty since there are no elements with that class.

I think you meant to use the actions-toolbar class.

Upvotes: 1

Related Questions