Var not returning when changed through an Ajax function

Question

I cannot seem to get a piece of code to return a variable yet it will log the variable in the console just fine. The json data is returning correctly and every array value that I call is there, the only thing not working is return Html; and I don't know why.

Code...

function Input(Type, Name, Other, Value){
var Html = '';
switch(Type) {
    case 'Select':
        var formData = {
            'Type': Other,
            'Options': Options
        };
        $.ajax({
            url: './PHPAPI/GetSelect.php',
            method: 'get',
            data: formData,
            dataType: 'json'
        }).done(function (data) {
            Html = "<select name='"+Name+"'>";
            $.each(data['Result'], function(Key, Value) {
                Html = Html + "<option value='"+Value['Value']+"'>"+Value['Option']+"</option>";
            });
            Html = Html + "</select>";
            console.log(Html);
        });
        break;
    case 'Number':
        Html = "<input type='number' min='0' value='0' name='"+Name+"' step='0.01'>";
        break;
    case 'Text':
        Html = "<input type='text' name='"+Name+"' value='"+Value+"'>";
        break;
    case 'Date':
        Html = "<input type='date' value='0' name='"+Name+"' value='"+Value+"'>";
        break;
    case 'Time':
        Html = "<input type='time' value='0' name='"+Name+"' value='"+Value+"'>";
        break;
    case 'DateTime':
        Html = "<input type='datetime-local' value='"+Value+"' name='"+Name+"'>";
        break;
    case 'Duration':
        Html = "<input type='range' min='0' max='100' value='0' name='"+Name+"' step='1'><output id='"+Name+"'>0</output>";
        break;
    case 'Phone':
        Html = "<input type='phone' name='"+Name+"'>";
        break;
    case 'Email':
        Html = "<input type='email' name='"+Name+"'>";
        break;
    case 'Password':
        Html = "<input type='password' name='"+Name+"'>";
        break;
    case 'Submit':
        Html = "<input type='submit' name='"+Name+"' value='Submit'>";
        break;
    case 'Checkbox':
        Html = "<input type='checkbox' name='"+Name+"'>";
        break;
    case 'Radio':
        Html = "<input type='radio' name='"+Name+"'>";
        break;
    case 'Button':
        Html = "<button name='"+Name+"'>"+Value+"</button>";
        break;
    default:
        Html = "<p>There was an issue with input selection Args(Type:"+Type+"|Name:"+Name+"|Other:"+Other+"|Value:"+Value+")</p>";
        break;
    }
    return Html;
}

Answer 1

Why it doesn't works

The code you're running is asynchronous, meaning that by the time you return the value, the Ajax call has not been finished yet.

The other types work fine because you generate the HTML right after the function is called, meaning it doesn't has to wait for anything to finish.

But the Select type makes a HTTP request through Ajax, which is not instantaneous, that's why you have to pass a function as an argument, so it gets called when it's complete. Simply setting Html inside the function will not do it, because the HTTP request is not finished when your function finishes running.

Solution

What you need to do is add a callback to your function and then pass the value to it:

function Input(Type, Name, Other, Value, Callback)
{
    var Html = '';
    switch (Type)
    {
    case 'Select':
        var formData = {
            'Type': Other,
            'Options': Options
        };
        $.ajax(
            {
                url: './PHPAPI/GetSelect.php',
                method: 'get',
                data: formData,
                dataType: 'json'
            })
            .done(function (data)
            {
                Html = "<select name='" + Name + "'>";
                $.each(data['Result'], function (Key, Value)
                {
                    Html = Html + "<option value='" + Value['Value'] + "'>" + Value['Option'] + "</option>";
                });
                Html = Html + "</select>";
                Callback(Html);
            });
        break;

    case 'Number':
        Html = "<input type='number' min='0' value='0' name='" + Name + "' step='0.01'>";
        Callback(Html);
        break;
    case 'Text':
        Html = "<input type='text' name='" + Name + "' value='" + Value + "'>";
        Callback(Html);
        break;
    case 'Date':
        Html = "<input type='date' value='0' name='" + Name + "' value='" + Value + "'>";
        Callback(Html);
        break;
    case 'Time':
        Html = "<input type='time' value='0' name='" + Name + "' value='" + Value + "'>";
        Callback(Html);
        break;
    case 'DateTime':
        Html = "<input type='datetime-local' value='" + Value + "' name='" + Name + "'>";
        Callback(Html);
        break;
    case 'Duration':
        Html = "<input type='range' min='0' max='100' value='0' name='" + Name + "' step='1'><output id='" + Name + "'>0</output>";
        Callback(Html);
        break;
    case 'Phone':
        Html = "<input type='phone' name='" + Name + "'>";
        Callback(Html);
        break;
    case 'Email':
        Html = "<input type='email' name='" + Name + "'>";
        Callback(Html);
        break;
    case 'Password':
        Html = "<input type='password' name='" + Name + "'>";
        Callback(Html);
        break;
    case 'Submit':
        Html = "<input type='submit' name='" + Name + "' value='Submit'>";
        Callback(Html);
        break;
    case 'Checkbox':
        Html = "<input type='checkbox' name='" + Name + "'>";
        Callback(Html);
        break;
    case 'Radio':
        Html = "<input type='radio' name='" + Name + "'>";
        Callback(Html);
        break;
    case 'Button':
        Html = "<button name='" + Name + "'>" + Value + "</button>";
        Callback(Html);
        break;
    default:
        Html = "<p>There was an issue with input selection Args(Type:" + Type + "|Name:" + Name + "|Other:" + Other + "|Value:" + Value + ")</p>";
        Callback(Html);
        break;
    }
}

Usage:

Input('Sometype', 'Somename', 'Other', 'Value', function(Html){
    // Html will be avaliable here.
});