Pass data from javascript to php in the same page

Question

i want to make a function on my landing page that get the user location and calculate the nearest store and show it on the page.. im using this code to calculate..

var cities = [
     ["city1", 10, 50, "blah"],
     ["city2", 40, 60, "blah"],
     ["city3", 25, 10, "blah"],
];

function NearestCity(latitude, longitude) {
    var mindif = 99999;
    var closest;

for (index = 0; index < cities.length; ++index) {
    var dif = PythagorasEquirectangular(latitude, longitude, cities[index][1], cities[index][2]);
    if (dif < mindif) {
    closest = index;
    mindif = dif;
  }
}

    alert(cities[closest]);
}

how to pass the result to php and store to db?

Posting it to a php file would be one option. Essentially 'faking' a form where javascript posts as if it were form data. PHP can then pick it up in its $_POST var. Have a look into ajax posting and php form basics. — Sk446, Aug 02 '17 at 06:40

score 1 · Answer 1 · answered Aug 02 '17 at 08:13

To pass the data from the NearestCity function you would typically use ajax - the request can be to the same page or another depending upon your own preference. Below shows how you might send the data to the same page to be used by your PHP code - in this case it doesn't save the info to the database but it could do so very easily.

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();

        /* read and process ajax post request - available through the "$_POST" array */

        /* add to db or whatever */

        /* 
            send response to ajax callback
            Here it is just a simple output showing the data that was sent via POST
            but should be more meaningful ~ perhaps db results or html content etc
        */
        echo implode( PHP_EOL, $_POST );

        exit();
    }
?>
<!doctype html>
<html>
    <head>
        <title>Find nearest - send via ajax to same page</title>
        <script>
            var defaults={
                lat:52.628593, 
                lng:1.296380
            };

            var cities = [
                 ['Aylsham', 52.794847, 1.252565, 'Aylsham is a historic market town and civil parish on the River Bure in north Norfolk, England'],
                 ['North Walsham', 52.823477, 1.390931, 'North Walsham is a market town and civil parish in Norfolk, England within the North Norfolk district'],
                 ['Dereham', 52.681311, 0.939737, 'Dereham, also known as East Dereham, is a town and civil parish in the English county of Norfolk'],
                 ['Cambridge',52.204548, 0.124404,'Cambridge is a city on the River Cam in eastern England, home to the prestigious University of Cambridge, dating to 1209'],
                 ['Swanton Morley',52.714710, 0.986908,'Swanton Morley is a village and civil parish situated in the English county of Norfolk']
            ];

            function Deg2Rad(deg) {
              return deg * Math.PI / 180;
            }

            function PythagorasEquirectangular(lat1, lon1, lat2, lon2) {
              lat1 = Deg2Rad(lat1);
              lat2 = Deg2Rad(lat2);
              lon1 = Deg2Rad(lon1);
              lon2 = Deg2Rad(lon2);
              var R = 6371; // km
              var x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2);
              var y = (lat2 - lat1);
              var d = Math.sqrt(x * x + y * y) * R;
              return d;
            }

            function NearestCity( _latitude, _longitude ) {
                var mindif = 99999;
                var closest;
                var tmp=[];

                console.info('Find nearest city based upon lat:%s and lng:%s',_latitude, _longitude);

                for ( var i=0; i < cities.length; i++ ) {
                    var _lat=cities[i][1];
                    var _lng=cities[i][2];

                    var difference = PythagorasEquirectangular( _latitude, _longitude, _lat, _lng );

                    if( difference < mindif ) {
                        closest = i;
                        mindif = difference;
                        tmp.push( cities[ i ] );
                    }
                }

                /* send request to the same page! */
                ajax.call( this, location.href, tmp, cbNearestCity );
            }

            function ajax( url, params, callback ){
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if( xhr.readyState==4 && xhr.status==200 ){
                        callback.call( this, this.response );
                    }
                };
                var payload=[];
                for( var n in params )payload.push( params[n][0]+'='+params[n] );

                xhr.open( 'post', url, true );
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
                xhr.send( payload.join('&') );
            }

            function cbNearestCity(response){
                document.getElementById('results').innerHTML=response;
            }



            document.addEventListener('DOMContentLoaded',function(e){
                if( navigator.geolocation ){
                    navigator.geolocation.getCurrentPosition( function( pos ){
                        NearestCity.call( this, pos.coords.latitude, pos.coords.longitude );
                    });
                } else {
                    NearestCity.call( this, defaults.lat, defaults.lng );
                }
            },{ capture:false, passive:true } );
        </script>
    </head>
    <body>
        <h1>Find nearest city - using geolocation on page load</h1>
        <pre id='results'></pre>
    </body>
</html>

score 0 · Answer 2 · answered Aug 02 '17 at 06:51

0

You can use AJAX for communications between frontend and backend. Check this MDN guide for AJAX.

Also, you can check this SO question and the many questions tagged ajax to learn more.

answered Aug 02 '17 at 06:51

Dolf Barr

509
4
13

score 0 · Answer 3 · answered Aug 02 '17 at 06:53

So your heading is - Pass data from javascript to php in the same page

If it would have possible web development has been changed a lot. Javascript is a client side programming language. and php is a server side programming language.

You can not pass data to php in the same page without reloading.

you will have to use ajax to pass the data to php but for that you will have to make different php page, not in the same page.

But if you still wants to pass data from javascript to the same page, you will have to reload the page.
- pass data to the hidden field
- by javascript automatically post the form
- page will reload and you will get the result in $_POST in a same page
(but not a good way.)

how is that? please send us a code for this ....just send us a code to pass javascript variable data to php in a same page without refreshing the page. — Farsay, Aug 02 '17 at 06:58

score 0 · Answer 4 · answered Aug 02 '17 at 07:27

You need to make and AJAX request to the PHP page.

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "abc.php", true);
  xhttp.send("mindif="+mindif+"&&closest="+closest);

Add this to the end of your function after you have calculated the value. Quick reference - Ajax Javascript

score 0 · Answer 5 · answered Aug 02 '17 at 07:29

0

after calculate, you can send data via ajax request:

$.ajax({
    method: "POST",
    url: "some.php",
   data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
   alert( "Data Saved: " + msg );
});

click here for more detail

answered Aug 02 '17 at 07:29

Shin Sang Ki

177
1
1
11

Pass data from javascript to php in the same page

5 Answers5