User Profile Form Not Saving Data

Question

I'm having some trouble saving custom user fields via a front-end form as described here. All the other forms on the site that use the same method save the data correctly. I'm able to pull in the user data correctly if I manually input it in the Craft dashboard. I examined the POST request from the form in devtools and I get a 200 status code so it seems like it's posting the data correctly, however it doesn't seem to be saving on Craft's side.

Any help would be appreciated. The code for the form can be seen below.

<form method="post" accept-charset="UTF-8" id="customForm">
    {{ getCsrfInput() }}
    <input type="hidden" name="action" value="users/saveUser">
    <input type="hidden" name="userId" value="{{ currentUser.id }}">
    <li>
        <div class="input-container">
            <label for="secondaryEmailAddress">Secondary Email Address</label>
            <input id="secondaryEmailAddress" type="email" class="signup-input" name="fields[secondaryEmailAddress]" value="{{ currentUser.secondaryEmailAddress }}">
            <img src="{{ siteUrl }}assets/img/forms/email.png">
        </div><!-- End Input Container -->
    </li>
    <li>
        <div class="input-container">
            <label for="secondaryContactName">Secondary Contact Name</label>
            <input  id="secondaryContactName" type="text" class="signup-input" name="fields[secondaryContactName]" value="{{ currentUser.secondaryContactName }}">
            <img src="{{ siteUrl }}assets/img/forms/username.png">
        </div><!-- End Input Container -->
    </li>
    <li>
        <div class="input-container">
            <label for="zipCode">Zip Code</label>
            <input  id="zipCode" type="text" class="signup-input" name="fields[zipCode]" value="{{ currentUser.zipCode }}">
            <img src="{{ siteUrl }}assets/img/forms/zipcode.png">
        </div><!-- End Input Container -->
    </li>
    <li>
        <div class="input-container">
            <label for="describeYourself">Describe Yourself</label>
            <input id="describeYourself" readonly type="text" class="signup-input" name="fields[describeYourself]" value="{{ currentUser.describeYourself.label }}">
            <img src="{{ siteUrl }}assets/img/forms/learner.png">
            <img class="dropdown-arrow" src="{{ siteUrl }}assets/img/global/chevron-down.png" />
        </div><!-- End Input Container -->
    </li>
    <div class="profile-dropdown" id="describeDropdown">
        <ul>
            {% for option in currentUser.describeYourself.options %}
                <li>{{ option.label }}</li>
            {% endfor %}
        </ul>
    </div>
    <li class="conditionalDropdown" id="myAgeItem">
        <div class="input-container">
            <label>My Age</label>
            <input id="myAge" readonly type="text" class="signup-input" name="fields[myAge]" value="{{ currentUser.myAge.label }}">
            <img src="{{ siteUrl }}assets/img/forms/learner-type.png">
            <img class="dropdown-arrow" src="{{ siteUrl }}assets/img/global/chevron-down.png" />
        </div>
    </li>
    <div class="profile-dropdown" id="myAgeDropdown">
        <ul>
            {% for option in currentUser.myAge.options %}
                <li>{{ option.label }}</li>
            {% endfor %}
        </ul>
    </div>
    <li class="conditionalDropdown" id="learnerAgeItem">
        <div class="input-container">
            <label>Learner Age</label>
            <input id="learnerAge" readonly type="text" class="signup-input" name="fields[learnerAge]" value="{{ currentUser.learnerAge.label }}">
            <img src="{{ siteUrl }}assets/img/forms/learner-type.png">
            <img class="dropdown-arrow" src="{{ siteUrl }}assets/img/global/chevron-down.png" />
        </div>
    </li>
    <div class="profile-dropdown" id="learnerAgeDropdown">
        <ul>
            {% for option in currentUser.learnerAge.options %}
                <li>{{ option.label }}</li>
            {% endfor %}
        </ul>
    </div>
    <li class="conditionalDropdown" id="teacherItem">
        <div class="input-container">
            <label>Grades</label>
            <input id="grades" readonly type="text" class="signup-input" name="fields[grades]" value="{{ currentUser.grades.label }}">
            <img src="{{ siteUrl }}assets/img/forms/learner-type.png">
            <img class="dropdown-arrow" src="{{ siteUrl }}assets/img/global/chevron-down.png" />
        </div>
    </li>
    <div class="profile-dropdown" id="gradesDropdown">
        <ul>
            {% for option in currentUser.grades.options %}
                <li>{{ option.label }}</li>
            {% endfor %}
        </ul>
    </div>
    <li>
        <div class="input-container">
            <label for="howDidYouFindUs">How Did You Find Us?</label>
            <input id="howDidYouFindUs" readonly type="text" class="signup-input" name="fields[howDidYouFindUs]" value="{{ currentUser.howDidYouFindUs.label }}">
            <img src="{{ siteUrl }}assets/img/forms/online-search.png">
            <img class="dropdown-arrow" src="{{ siteUrl }}assets/img/global/chevron-down.png" />
        </div>
    </li>
    <div class="profile-dropdown" id="findUsDropdown">
        <ul>
            {% for option in currentUser.howDidYouFindUs.options %}
                <li>{{ option.label }}</li>
            {% endfor %}
        </ul>
    </div>
    <input class="button" type="submit" value="Save Profile">
</form>

Thanks

Answer 1

Realized my issue, I was sending back the option labels instead of the option values for the dropdown fields in the form.