Passing data from javascript to php using ajax?

Question

i am trying to retrieve this data speedMbps from my JavaScript. using Ajax to post the data to my php code but i am not getting any output. I am new to ajax and only used ajax for auto-completion.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>          

<script>
//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!
var imageAddr = "testimage.jpg"; 
var downloadSize = 2097152; //bytes

window.onload = function() {
    var oProgress = document.getElementById("progress");
    oProgress.innerHTML = "Loading the image, please wait...";
    window.setTimeout(MeasureConnectionSpeed, 1);
};

function MeasureConnectionSpeed() {
    var oProgress = document.getElementById("progress");
    var startTime, endTime;
    var download = new Image();
    download.onload = function () {
        endTime = (new Date()).getTime();
        showResults();
    }

    download.onerror = function (err, msg) {
        oProgress.innerHTML = "Invalid image, or error downloading";
    }

    startTime = (new Date()).getTime();
    var cacheBuster = "?nnn=" + startTime;
    download.src = imageAddr + cacheBuster;

    function showResults() {
        var duration = (endTime - startTime) / 1000;
        var bitsLoaded = downloadSize * 8;
        var speedBps = (bitsLoaded / duration).toFixed(2);
        var speedKbps = (speedBps / 1024).toFixed(2);
        var speedMbps = (speedKbps / 1024).toFixed(2);
        oProgress.innerHTML = "Your connection speed is: <br />" + 
           speedBps + " bps<br />"   + 
           speedKbps + " kbps<br />" + 
           speedMbps + " Mbps<br />";

        $.ajax({
          method: "POST",
          url: "test_select.php",
          data: {speedMbps: speedMbps },
          cache: false
        }).done(function( html ) {
            $( "#speed" ).val( html );
        });
    }
}

</script>

<input type="text" id="speed" name="speed" value="">

test_select.php

<?php
    echo $_POST['speedMbps'];

    if(isset($_POST['speedMbps'])){
        echo $speedMbps = $_POST['speedMbps'];
    }

?>

Answer 1

$.ajax({
      type: "POST",
      url: "test_select.php",
      data: {speedMbps: speedMbps },
      cache: false
    }).done(function( html ) {
        $( "#results" ).val( html );
    });

change method:"POST" to type:"POST" .

Answer 2

You'll probably want to merge the top an bottom script and place it after your jquery hook because the variables.

Also you are missing method: "POST" in your Ajax script from what I can tell. This is needed to specify the type of HTTP request, since your using $_POST in your .php file, the request types need to match.

$.ajax({
  method: "POST",
  url: "test_select.php",
  data: {speedMbps: speedMbps },
  cache: false
}).done(function( html ) {
    $( "#results" ).val( html );
});

Here is jQuery's docs on ajax: ajax docs