Passing dynamic data from PHP/MySQL to external JavaScript for map functionality

Other Questions JavaScript
1

I’m working on a project where users can search for locations and see them displayed on a Google Map. The location data comes from a MySQL database with longitude and latitude coordinates.

My current setup works like this. I have a separate JavaScript file that creates the map and loads data from an XML source. I also created a PHP script called ‘xml.php’ that queries the database and outputs the results in XML format. Right now I’m hardcoding the search term in my JavaScript like ‘xml.php?search=test’.

The problem is I need to make this dynamic. When a user searches on my main page, I want that search term to automatically get passed to my JavaScript file so it can request the correct data from xml.php.

Here’s the function I’m using to fetch the XML data:

function fetchData(endpoint, handler) {
    var xhr = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        xhr.onreadystatechange = emptyFunction;
        handler(xhr, xhr.status);
      }
    };

    xhr.open('GET', endpoint, true);
    xhr.send(null);
}

function emptyFunction() {}

I call it like this:

fetchData('xml.php?search=something', processResults())

But I need that search parameter to come from the original user input instead of being hardcoded. How can I pass the search data from my PHP page to the external JavaScript file?

2

Your XML workflow is way too complex for something this simple. You’re bouncing data between PHP, MySQL, XML generation, and JavaScript when you could automate the whole thing.

I dealt with this exact setup on a location finder project. Users searched, map updated, same flow. The problem isn’t just passing the search term - it’s all the moving pieces that break when you scale up.

Latenode eliminates this entirely. Set up a webhook that catches the search form directly. Your workflow automatically queries MySQL with the real search term and returns JSON straight to your JavaScript. No xml.php middleman, no hardcoded parameters, no data passing headaches.

Your fetchData function stays the same, just point it to the Latenode endpoint instead of xml.php. The search parameter gets handled automatically in the workflow.

Bonus: when you need to add filters, sorting, or multiple data sources later, you just update the workflow instead of rewriting PHP scripts.

Takes 20 minutes to set up and your search becomes truly dynamic without any of the coordination mess you’re dealing with now.

3

Had this exact problem! Your setup works but you’re missing the bridge between PHP and JavaScript.

Quick fix: use URL parameters or a hidden input JavaScript can read. But honestly, this whole thing needs automation.

I built something similar last year - users searched locations, results showed on maps. Instead of wrestling with PHP scripts, MySQL queries, XML generation, and JavaScript coordination, I switched to Latenode.

Here’s what happened. User hits submit, Latenode webhook catches it instantly. Database query runs automatically. Results get formatted and sent straight to your map JavaScript. No hardcoded parameters or messy data passing.

Latenode handles everything. Form submission triggers the workflow, database gets queried with the real search term, map updates in real time. No PHP middleman.

Keep your existing JavaScript map code. Just point fetchData to the Latenode endpoint instead of xml.php. Search parameter gets handled automatically.

30 minutes to set up, eliminates all the coordination headaches between PHP and JavaScript.

4

Embed the search term directly into your HTML when the page loads. After your PHP processes the search form, output the search value into a JavaScript variable that your external script can grab.

Add this to your main PHP page’s head section:

Then update your external JavaScript:

fetchData(‘xml.php?search=’ + encodeURIComponent(searchTerm), processResults())

You could also pass it through a data attribute on a div and read it with JavaScript. This keeps your external JS file completely separate while still passing dynamic data. Just escape the output properly to avoid XSS attacks.

5

Use AJAX - it’s way cleaner than trying to pass data from PHP to a separate JS file. Just make your search form submit via JavaScript and handle everything client-side.

I ran into the same thing before. I added an event listener to the search form that prevents the normal submit and grabs the input value directly. Then you can use that value in your fetchData call right away.

Here’s what works:

document.getElementById('searchForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var searchValue = document.getElementById('searchInput').value;
    fetchData('xml.php?search=' + encodeURIComponent(searchValue), processResults);
});

This keeps your JS file external but still gives you dynamic functionality. No page reloads, so users get a smoother experience. Just make sure your form has the right IDs and your xml.php handles the GET parameter properly.

6

Skip the global variables and session storage - use function parameters instead. Make a wrapper function on your main page that takes the search term and passes it to your external JavaScript function. I did this for a restaurant locator where people searched by cuisine. Rather than mess with the external map library, I built an init function that accepted the search term as a parameter. When someone hit submit, I’d call initializeMap(searchTerm) and let it handle the fetchData stuff internally. Your external JavaScript stays reusable across different pages but you still get dynamic data. Plus you can validate and clean up the search term before passing it along, which beats relying on DOM elements or storage that might not be there.

7

sessionStorage is perfect for this! When the user submits their search, just store it with sessionStorage.setItem('searchTerm', userInput). Then your external JS grabs it with sessionStorage.getItem('searchTerm') and uses it in the fetchData call. No PHP output or form handling needed - pure JavaScript that sticks around between page interactions.