Not able to save the user selected picklist value in SFCC Demandware

Question

I created a new attribute(favouriteStore - Enum of String datatype) in standard 'profile' object and added it to the account creation page in storefront. Now, I couldn't get the user selected picklist value from ISML to js. I tried the below code, and it is returning undefined. Could you please help me with this.

Below is the isml code: registerForm.isml

 <div class="form-group
        <isif condition=" ${!!pdict.profileForm.customer.favouriteStore.mandatory === true}">required</isif>">

        <label class="form-control-label" for="registration-form-favouriteStore">
            <isprint value="${pdict.profileForm.customer.favouriteStore.label}" encoding="htmlcontent" />
        </label>
        <div class="info-icon">
            <span><i class="fa fa-info-circle beet-color" aria-hidden="true"></i></span>
            <span class="tooltip account-tooltip d-none">Pick your favourite store</span>
        </div>
        <select class="custom-select form-control" id="favouriteStore" onchange="getSelected(this)" name="favouriteStore">
        <isloop items=${pdict.profileForm.customer.favouriteStore.options} var="store">
            <option id="${store.id}" value="${store.htmlValue}" 
            <isif condition="${store.selected}">selected</isif> >${store.label}</option>
        </isloop>
        </select>
    </div>

Js code: Account.js

var registrationFormObj = {
            firstName: registrationForm.customer.firstname.value,
            lastName: registrationForm.customer.lastname.value,
            phone: registrationForm.customer.phone.value,
            email: registrationForm.customer.email.value,
            emailConfirm: registrationForm.customer.emailconfirm.value,
            password: registrationForm.login.password.value,
            passwordConfirm: registrationForm.login.passwordconfirm.value,
            customerPostcode: registrationForm.customer.customerPostcode.value,
            favouriteStore: registrationForm.customer.favouriteStore.value,
            marketingPreferences: registrationForm.customer.marketingPreferences.value,
            validForm: registrationForm.valid,
            form: registrationForm
        };

profile.xml:

<field formid="favouriteStore" label="Favourite Store" type="string" mandatory="true" binding="favouriteStore">
            <options>
                <option optionid="" label="" value=""/>
                <option optionid="1" label="Shell Kingsburn, Borough of Royal Kensington, London EC2 3AH" value="Shell Kingsburn Borough of Royal Kensington, London EC2 3AH"/>
                <option optionid="2" label="Chealsea, City Road, London EC2 9AW" value="Chealsea, City Road, London EC2 9AW"/>
                <option optionid="3" label="London Store, 2nd Street, London  EC2 9AW" value="London Store, 2nd Street, London  EC2 9AW"/>
            </options>
            </field>

All other string fields are getting saved, just this favouriteStore picklist field is returning undefined. Could you please guide me where I'm going wrong with this.

Thanks in Advance!

Answer 1

As AlBlue mentioned, the issue seems to be that you didn't spell favouriteStore the same way in the ISML and the DWScript. (JavaScript)

That said, you should ensure that you also have form XML defined for that field. For example, you should add it to your storefront cartridge's cartridge/forms/default/profile.xml file. (or override the one from app_storefront_base)