progress bar with ajax and jquery

//implementing a progress bar with ajax and jquery

//html
<form class="dom-searc-form">
    <div class="input-group input-group-lg">
        <input type="text" class="form-control domain-textfield"
                placeholder="Enter a domain name without the '.ug' part e.g newvision">
            <span class="input-group-btn">
                <button class="btn btn-default check-domain" type="button">Go!</button>
            </span>
    </div><!-- /input-group -->
</form>
<!-- progress bar -->
<div class="progress"></div>
<!-- show results here -->
<div class="domain-search-res" style="display: none">

</div>

//css
/* progress bar */
.progress {
    display: block;
    text-align: center;
    width: 0;
    height: 3px;
    background: red;
    transition: width .3s;
}
.progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}

//js
$(document).ready(function () {

});

$('.dom-searc-form input').keypress(function (e) {
  if (e.which == 13) {
   search_domain_form();
    return false;    //<---- Add this line
  }
});

$(".check-domain").click(function(e){
    search_domain_form();
});

function search_domain_form(){
    var domain_val = $('.domain-textfield').val();
    search_domain(domain_val);
}//close search_domain_form

function search_domain(domain_val) {
    $.ajax({
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                    $('.progress').css({
                        width: percentComplete * 100 + '%'
                    });
                    if (percentComplete === 1) {
                        $('.progress').addClass('hide');
                    }
                }
            }, false);
            xhr.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                    $('.progress').css({
                        width: percentComplete * 100 + '%'
                    });
                }
            }, false);
            return xhr;
        },
        method: 'POST',
        url: get_base_url()+"check_domain",
        dataType: 'json',
        data: { domain: domain_val },
        success: function(data) {
           // console.log(data);
            $('.domain-search-res').html('');
            $(".domain-search-res").css('display', 'block');
            for (i = 0; i < data.length; ++i) {
                console.log(data[i]);
                domain_look_res(data[i], i);
            }
        },
        error: function() {
            console.log('There was an error');
        }
    });

}//close search_domain

function domain_look_res (data, id) {
    var d_html = domain_html(id);
    $('.domain-search-res').append(d_html);
    if (parseInt(data.status)) {
        $('div.dom').addClass('available');
        $('#' + id + ' span.domain-el').addClass('domain-avail');
        $('#' + id + ' span.domain-el').removeClass('domain-unavail');
        $('.domain-name').text(data.domain_name);
        $('#' + id + ' .domain-tld').text(data.domain_tld);
        $('#' + id + ' .availability').text('Available at ' + data.domain_price);
    }else{
        $('div.dom').removeClass('available');
        $('#' + id + ' span.domain-el').removeClass('domain-avail');
        $('#' + id + ' span.domain-el').addClass('domain-unavail');
        $('.domain-name').text(data.domain_name);
        $('#' + id + ' .domain-tld').text(data.domain_tld);
        $('#' + id + ' .availability').text('Taken');
    }
}//close domain_look_res

function domain_html(id) {
    var html = '<div id=' + id + ' class="dom">'+
        '<a href="#"> ' +
            '<span class="domain" >' +
                '<span class="domain-name domain-el"></span>' +
                '<span class="domain-tld domain-el"></span>' +
            '</span>' +
            '<span class="availability domain-el"></span>' +
        '</a>' +
    "</div>";
    return html;
}//close domain_html

function get_base_url() {
    var hostname = window.location.origin;
    var base_dir = window.location.pathname.split('/')[1];
    var base_url = hostname + '/'+ base_dir + '/';
    return base_url;
}//close get_base_url