[REGISTER] setting modx user profile fields

[[!UpdateProfile? &excludeExtended=`email:required:email,login-updprof-btn` &useExtended=`1` &preHooks=`formatDob`]]

<div class="update-profile">
    <div class="updprof-error">[[+error.message]]</div>
    [[+login.update_success:if=`[[+login.update_success]]`:is=`1`:then=`[[%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]`]]

    <h2>BASIC INFORMATION</h2>
    <form class="form" action="[[~[[*id]]]]" method="post">
        <input type="hidden" name="nospam" value="" />

        <label for="fullname">[[!%login.fullname? &namespace=`login` &topic=`updateprofile`]]
            <span class="error">[[+error.fullname]]</span>
        </label>
        <input type="text" name="fullname" id="fullname" value="[[+fullname]]" />

        <label for="email">[[!%login.email]]
            <span class="error">[[+error.email]]</span>
        </label>
        <input type="text" name="email" id="email" value="[[+email]]" />

        <label for="phone">[[!%login.phone]]
            <span class="error">[[+error.phone]]</span>
        </label>
        <input type="text" name="phone" id="phone" value="[[+phone]]" />

        <label for="address">[[!%login.address]]
            <span class="error">[[+error.address]]</span>
        </label>
        <input type="text" name="address" id="address" value="[[+address]]" />

        <label for="city">[[!%login.city]]
            <span class="error">[[+error.city]]</span>
        </label>
        <input type="text" name="city" id="city" value="[[+city]]" />

        <label for="state">[[!%login.state]]
            <span class="error">[[+error.state]]</span>
        </label>

        <select name="state">
            [[!FormItStateOptions? &selected=`[[!+fi.state]]`]]
        </select>

        <label for="zip">[[!%login.zip]]
            <span class="error">[[+error.zip]]</span>
        </label>
        <input type="text" name="zip" id="zip" value="[[+zip]]" />

        
        <label for="country">[[!%login.country]]
            <span class="error">[[+error.country]]</span>
        </label>
        <select name="country">
            [[!FormItCountryOptions? &selected=`[[!+country]]` &prioritized=`US,GB,CA,AU` &prioritizedGroupText=`Frequent Visitors` &allGroupText=`Other Countries`]]
        </select>

        <label for="dob">Date of birth:
            <span class="error">[[+error.dob]]</span>
        </label>
        <input type="text" name="dob:required" id="dob" value="[[+dob:date=`%m-%Y`]]" />

        <label for="sex">Gender
            <span class="error">[[+error.sex]]</span>
        </label>
        <select name="sex">
           <option value="Male" [[+sex::is=`Male`:then=`selected`]]>Male</option>
           <option value="Female" [[+sex:is=`Female`:then=`selected`]]>Female</option>
       </select>


       <label for="nationality">Nationality
        <span class="error">[[+error.nationality]]</span>
    </label>
    <select name="nationality">
        <option value="">Select below</option>
        <option value="American Indian or Alaska Native" [[+nationality::is=`American Indian or Alaska Native`:then=`selected`]]>American Indian or Alaska Native</option>
        <option value="Asian" [[+nationality::is=`Asian`:then=`selected`]]>Asian</option>
        <option value="Black or African American" [[+nationality::is=`Black or African American`:then=`selected`]]>Black or African American</option>
        <option value="Native Hawaiian or Other Pacific Islander" [[+nationality::is=`Native Hawaiian or Other Pacific Islander`:then=`selected`]]>Native Hawaiian or Other Pacific Islander</option>
        <option value="White" [[+nationality::is=`White`:then=`selected`]]>White</option>
    </select>


 


<br class="clear" />

<div class="form-buttons">
    <input type="submit" name="login-updprof-btn" value="[[!%login.update_profile]]" />
</div>
</form>
<p><a href="[[~22]]">Change password</a></p>
</div>


<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<script>
$( "#dob" ).datepicker({
  dateFormat: 'dd-mm-yy',
  changeMonth: true,
  changeYear: true,
  yearRange: "-110:+0",
  maxDate: "0"
});
</script>