<form method="post" enctype="multipart/form-data" id="profile-form" action="" class="form" accept-charset="UTF-8">

{{ csrfInput() }}

<input type="hidden" name="action" value="users/save-user">
<input type="hidden" name="redirect" value="account">
<input type="hidden" name="userId" value="{{ currentUser.id }}">
{{ redirectInput('my-program/account') }}

{% macro errorList(errors) %}
{% if errors %}
    <ul class="errors">
        {% for error in errors %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
{% endif %}
{% endmacro %}

{% from _self import errorList %}

<input type="hidden" name="userId" value="{{ currentUser.id }}">
<div class="row no-gutters">
    <div class="col-sm-3">
        {% if currentUser.getPhoto != '' %}
            <img src="{{ currentUser.photo.getUrl }}" alt="" class="mx-auto d-block img-fluid" style="width:150px;">
            {% else %}
            <img src="http://13.57.33.145/web/cpresources/e68e2d59/images/user.svg?v=1532465642" class="mx-auto d-block img-fluid" style="width:120px;">
        {% endif %}
        <input type="file" id="userPhoto" name="photo" value="Upload">
        <div id="profile-image-upload" class="text-center">Change Avatar</div>
    </div>
    <div class="col-sm-9">
        <div class="form-group">
            <label>Name</label><br>
            <input type="text" id="fullName" name="fields[fullName]" value="{{ currentUser.fullName }}">
        </div>
        <div class="form-group">
            <label>Role</label><br>
            <input type="text" id="userRole" name="" value="Your Role here">
        </div>
        <div class="form-group">
            <label for="company">company</label><br>
            <input type="text" id="company" name="fields[company]" value="{{ currentUser.company }}">
        </div>
        <div class="form-group">
            <label for="email">email</label><br>
            <input type="text" id="email" name="fields[email]" value="{{ currentUser.email }}">
        </div>
    </div>
</div><!-- end row -->
<div class="form-group row">
    <div class="col-lg-11 offset-md-0">
        <input type="submit" value="Save Changes" id="saveProfile" class="dark-btn">

    </div>
</div>

$("#profile-form").submit( function(e) { e.preventDefault(); var data = $(this).serialize();

$.ajax({
    method: "POST",
    url: "users/save-user",
    data: data,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    success: function(data, response){

    }
});

});

<form method="post" enctype="multipart/form-data" id="profile-form" action="" class="form" accept-charset="UTF-8">

    {{ csrfInput() }}

    <input type="hidden" name="action" value="users/save-user">
    <input type="hidden" name="redirect" value="account">
    <input type="hidden" name="userId" value="{{ currentUser.id }}">
    {{ redirectInput('my-program/account') }}

    {% macro errorList(errors) %}
        {% if errors %}
            <ul class="errors">
                {% for error in errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endmacro %}

    {% from _self import errorList %}

    <input type="hidden" name="userId" value="{{ currentUser.id }}">
    <div class="row no-gutters">
        <div class="col-sm-3">
            {% if currentUser.getPhoto != '' %}
                <img src="{{ currentUser.photo.getUrl }}" alt="" class="mx-auto d-block img-fluid" style="width:150px;">
            {% else %}
                <img src="http://13.57.33.145/web/cpresources/e68e2d59/images/user.svg?v=1532465642" class="mx-auto d-block img-fluid" style="width:120px;">
            {% endif %}
            <input type="file" id="userPhoto" name="photo" value="Upload">
            <div id="profile-image-upload" class="text-center">Change Avatar</div>
        </div>
        <div class="col-sm-9">
            <div class="form-group">
                <label>Name</label><br>
                <input type="text" id="fullName" name="fields[fullName]" value="{{ currentUser.fullName }}">
            </div>
            <div class="form-group">
                <label>Role</label><br>
                <input type="text" id="userRole" name="" value="Your Role here">
            </div>
            <div class="form-group">
                <label for="company">company</label><br>
                <input type="text" id="company" name="fields[company]" value="{{ currentUser.company }}">
            </div>
            <div class="form-group">
                <label for="email">email</label><br>
                <input type="text" id="email" name="fields[email]" value="{{ currentUser.email }}">
            </div>
        </div>
    </div><!-- end row -->
    <div class="form-group row">
        <div class="col-lg-11 offset-md-0">
            <input type="submit" value="Save Changes" id="saveProfile" class="dark-btn">

        </div>
    </div>
</form>

$("#profile-form").submit( function(e) {
    e.preventDefault();
    var data = $(this).serialize();

    $.ajax({
        method: "POST",
        url: "users/save-user",
        data: data,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        success: function(data, response){
        }
    });
});