Loading an animation with an Ajax request I am not sure if this is the correct way to make an Ajax request and do the typical loading/processing GIF/animation while processing is happening and displaying the response.

HTML:

&lt;!-- start content --&gt;
&lt;div class='content'&gt;

    &lt;!-- start setup section --&gt;
        &lt;div class='photo-setup'&gt;

            &lt;div class='setup-head'&gt;
                &lt;div class='photo-name'&gt;Photo Name : &lt;input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name' value='Untitled'&gt;&lt;/div&gt;
            &lt;/div&gt;

            &lt;div class='photo-section'&gt;
                &lt;img src="&lt;?php echo 'tmp/' . $imgUpload-&gt;getFileName() . $imgUpload-&gt;getType() ?&gt;" alt='photo'&gt;
            &lt;/div&gt;

            &lt;div class='tag-section'&gt;
                Photo Tags : &lt;input type='text' placeholder='Tags e.g. (#beach #park #dog)'&gt;
            &lt;/div&gt;

            &lt;div class='ajax-loading'&gt;
                &lt;img src='ajax-loader.gif'&gt;
            &lt;/div&gt;

            &lt;div class='response'&gt;
            &lt;/div&gt;

            &lt;div class='commit-section'&gt;
                &lt;a class='save' href='#'&gt;Save&lt;/a&gt;&lt;a class='cancel' href='upload.php'&gt;Cancel&lt;/a&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;!-- end setup section--&gt;

&lt;/div&gt;
&lt;!-- end content --&gt;


CSS:

img { border: none; }
input { padding: 0.30em; }

.photo-setup {
    width: 600px;
    height: auto;
    margin: 0 auto;
    font-weight: 200;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.setup-head {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
    overflow: hidden;
}

.photo-name { float: left; }

.photo-section {
    border: 1px solid #cacece;
    text-align: center;
}

.tag-section {
    padding: 1em 0 1em 1em;
}

.tag-section input {
    width: 81%;
    display: inline-block;
}

.ajax-loading {
    text-align: center;
    margin: 1em;
    display: none;
}

.response {
    display: none;
    text-align: center;
}

.commit-section {
    text-align: center;
}

.commit-section a {
    margin-left: 1em;
}


jQuery:

$(document).ready(function() {

    $('.save').on('click', function(e) {
        e.preventDefault();
        save();
    });

    $(document).ajaxStart(function() {
        $('.commit-section .save').hide();
        $('.ajax-loading').fadeIn();
    });

    $(document).ajaxComplete(function() {
        setTimeout(function() {
            $('.ajax-loading, .commit-section').hide();
            $('.response').fadeIn();
        }, 500);
    });

});

// collect all photo data and send to php for database storage
function save() {

    // regex to parse hashtags
    var regex = /[#]+[A-Za-z0-9-_]+/g;
    var name = $.trim($('.photo-name input').val());
    var tags = $.trim($('.tag-section input').val()).match(regex);
    var photo = $.trim($('.photo-section img').attr('src'));

    $.ajax({

        url: 'save_photo.php',
        method: 'POST',
        dataType: 'html',
        data: {
            title: name,
            hash_tags: tags,
            filename: photo
        }

    })
    .done(function(response) {
        $('.response').html(response);
    })
    .fail(function() {
        alert('Something went wrong!')
    });
}
As far as basic implementation. You've got it down pat. That being said, I do have a few suggestions that could allow your app to run more fluently. I assume that you are uploading these photos and that they aren't photos already on the server being accessed.



If my above assumption is true, I highly suggest you use the &lt;input type='file' /&gt;. This will display the name of the file and will better maintain the file object for you when you pass it to the server. That being said, with the current implementation you actually don't upload any photos. All you do is give a name, but you don't physically package up the photo data and send it to the server to be processed.



Mizech makes a good point in his comment, though. Typically, you don't want to pass special characters unless you absolutely have to. That being said, the tagging system means you will having # showing up so why force the user to input it? Why not just have them input the tag without it? On the server side you can take the input and append the # in front because you know it should be there. It's about only having to do as much work as necessary and if you have to regex before sending then it would be easier to just send and then add it on the server.