Pass JS value to PHP using POST(without submit and refresh)

Question

I have google map in my website which is updating geocoordinats when dragging marker and shows address. JS passing values of X and Y to html "ID". I can send data by "GET", but I need to pass these values using POST and get in in another page to do INSERT command. Please help anyone, stucked 4 days in same thing.

P.S. header is busy and i need wihtout submit, cause it is already in FORM with submit button.

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('x').innerHTML = [
latLng.lat()
    
  ];

}
function updateMarkerPositions(latLng) {
  document.getElementById('y').innerHTML = [
    latLng.lng()
  ];

}



function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(-28.010299474408573, 153.39518896484606);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Point A',
    map: map,
    draggable: true
  });

  geocodePosition(latLng);

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('');
  });

  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('');
    updateMarkerPosition(marker.getPosition());
    updateMarkerPositions(marker.getPosition());
	

	var js_var= marker.getPosition(); 
  		document.getElementById("link").onclick = function () {			
			// ajax start
			var xhr;
			if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers 
			else xhr = new ActiveXObject("Microsoft.XMLHTTP"); 	// for IE
			
			var url = 'process.php?js_var=' + js_var;
			type: 'POST';
			xhr.open('POST', url, false);
			
			xhr.onreadystatechange = function () {
				if (xhr.readyState===4 && xhr.status===200) {
					var div = document.getElementById('infos');
					div.innerHTML = xhr.responseText;
				}
			}
			xhr.send();
			// ajax stop
			return false;
		}
	

  
  });

  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('');
    geocodePosition(marker.getPosition());
  });

}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);

#mapCanvas {
    width: 97%;
    height: 400px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyAcxTuiDebbsXYlEFomC1VEhvzD7_nB7Nc&sensor=false"></script>

<pre><div><div id="mapCanvas"></div>
  <div id="infoPanel">
   <b>Ünvan:</b>
    <div id="address"></div>
	<button href="#" id="link">Address accept</button>
      <div  id="x" ></div>
      <div  id="y" ></div>
      <div id="infos" ></div>
      <div id="markerStatus" style="display: none;"></div>
  </div></pre>

I use second "PHP" code to get "$_GET" data.

<?php
	if (isset($_GET['js_var']))	
	{

	$php_var = $_GET['js_var'];

	$subaftercomme= substr($php_var, 0, strpos($php_var, ','));
	$getX = substr($subaftercomme, 1);
	echo "<input value=\"$getX\" disabled=\"disabled\" />";
	$subfromcomma = substr($php_var, strpos($php_var, ",") + 1);
	$getY = substr($subfromcomma, 1, -1);
	echo "<input value=\"$getY\" disabled=\"disabled\" />";
	echo "<button type=\"hidden\"  name=\"badu\" value=\" Testiqle\" >hello</button>";
	}
	else
	{
			$php_var = "<br />js_var is not set!";
			echo $php_var;
	}
?>

Answer 1

Based on the fact that you tagged this question with jQuery I'm going to use jquery (as I'm more familiar with it).

$.post("process.php",
  {
    "js_var": js_var
  },
  function(data, status)
  {
    var div = document.getElementById('infos');
    div.innerHTML = data;
    // not sure what your data returns but you might need to change it
  }
);

For more information click here

Answer 2

Maybe you forgot to set the request header for the POST request:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');