Reputation: 33

Pass data from javascript to php in the same page

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?

Upvotes: 1

Answers (5)

Professor Abronsius

Reputation: 33823

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>

Upvotes: 1

Shin Sang Ki

Reputation: 197

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

Upvotes: 0

Amit Chawla

Reputation: 44

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

Upvotes: 0

Farsay

Reputation: 312

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.)

Upvotes: 0

Dolf Barr

Reputation: 529

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.

Upvotes: 0

Pass data from javascript to php in the same page

Answers (5)

Related Questions