<script>

function executeSpeedTest() {

    var status = document.getElementById("speedtestStatus");

    status.innerHTML = "SpeedTest gestartet. Bitte warten! Wir haben den Speedtest der Warteschlange inzugefügt. Wer melden uns mit den Ergebnissen per E-Mail bei Ihnen sobald die bearbeitung abgeschlossen ist."


    var url = document.forms["speedtestForm"]["url"].value;

    url = encodeURI(url);


    var baseUrl = "http://localhost:8000/coach/";

    httpGetAsync(baseUrl + url, function(response) {

        // do something

        status.innerHtml = "Speedtest wird ausgeführt mit ID: " + response;

    });


    // status ändern. gestartet mit ID


    // warten auf ergebnis


    // status auf fertig ändern


    // Ergebnisse anzeigen


    return false;

}


function httpGetAsync(theUrl, callback) {

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)

            callback(xmlHttp.responseText);

    }

    xmlHttp.open("GET", theUrl, true); // true for asynchronous

    xmlHttp.send(null);

}

</script>


<style>

    div.form {

        display: block;

        text-align: center;

    }

    form {

        margin-left: auto;

        margin-right: auto;

    }

</style>


<p>

    Prüfen Sie jetzt Ihre Webseite auf Geschwindigkeit. Tragen Sie dazu die Adresse Ihrer Webseite in das unten stehende Formular ein und senden Sie es ab.

</p>


<form name="speedtestForm" method="post" action="" onsubmit="return executeSpeedTest()">

    <p style="display: none;">

        <label>Leeres Feld:</label><br />

        <input type="text" maxlength="30" name="Leer" />

    </p>

    <p>

        <input type="url" name="url" placeholder="URL" />

    </p>

    <p>

        <input type="email" name="mail" placeholder="E-Mail" />

    </p>

    <p>

        <input type="checkbox" name="newsletter" style="width: 5% !important">Newsletter abonnieren*

    </p>

    <p>

        <input id="button" type="submit" value="Jetzt Webseite prüfen">

    </p>

</form>


<div id="speedtestStatus"></div>

<hr />


<div id="speedtestResult"></div>


<p>

    * Der Newsletter wird verwendet um Sie über neu veröffentlichte Fachartikel, Produkte und Dienstleistungen von uns zu Informieren.

</p>