Using AJAX to submit form

Question

I have developed a Python API and am now integrating it with a HTML template I have downloaded. It is a simple one page HTML template with a form to accept a album name and artist name. I am looking to process the form using AJAX. So once the form has been successfully submitted, it is replaced with a message returned by the API.

The (simplified) html snippet is:

<div class="form">
    <form role="form" action="form.php" id="signup">
        <div class="form-group">
            <label>Artist Name</label>
            <input type="text" name="artist" id="artist">
        </div>
        <div class="form-group">
            <label>Tracking Number</label>
            <input type="text" name="album" class="album">
        </div>
        <button type="submit" class="btn">Submit!</button>
    </form>
</div>

Then I have a JS file I import at the beginning of the html file. Below is the JS file.

$(function() {
    var form = $('#signup');

    var formMessages = $('#form-messages');

    $(form).submit(function(e) {
        e.preventDefault();
        var formData = {
            'artist'    : $('input[name=artist]').val(),
            'album'             : $('input[name=album]').val(),
        };

        // process the form
        $.ajax({
            type        : 'POST',
            url         : 'form.php',
            data        : formData,
            dataType    : 'json' 
    }) 
        .done(function(data) {
                var content = $(data).find('#content');
                $("#result").empty().append(content);
            });
});

I think the issue is with the .done(function(data)) however, the website I found the code on wasn't clear.

form.php returns a JSON string. At the moment when I use the form, it sends the information to the Python API and the Python API returns a JSON message. But I cannot access the JSON message. It is in contains

'code': X, 'message':'returned messaged...'

ideally I would like to do a if/else statement. So

if code = 1:
    display: Success 

etc but I have no idea where to start with it in PHP/JS.

Answer 1

I was able to get it working eventually after seeing a few other stack overflow answers and another website.

I added one div to the html file under the button before the end of the form to make:

<form>
    ...
    ...
    <button type="submit" class="btn">Submit!</button>
    <div id="thanks" style="display:none;"></div>
</form>

Then, in the JS file I amended .done(function(data)) to be:

.done(function(data) {
            if (data.result == '1') {
                $('#thanks').show().text("Success!");
                $('input[type="text"],text').val('');
            } else if (data.result == '2') {
                $('#thanks').show().text("Album and Artist already exists");
            } else {
                $('#thanks').show().text("Uh Oh. Something has gone wrong. Please try again later or contact me for more help");
            }
        });