Why does populating the input field with Javascript not work

Question

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?

getElementsByClassName, try getElementById instead, this element has Id dicount-code, but uses different class <input class="input-text" type="text" id="discount-code" — Nonik
– Nonik, Commented Oct 20, 2021 at 15:53

artie · Accepted Answer · 2021-10-20 15:22:17Z

1

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.

answered Oct 20, 2021 at 15:22

artie

1298 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mirek87 Over a year ago

Thanks for catching this one. I forgot to include the surrounding div with the class "discount-code". The input field is therefore fille correectly. but sumitting the form won't work. Sorry about the copy paste error. fixed it just now

Collectives™ on Stack Overflow

Why does populating the input field with Javascript not work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related