How to show visa info based on country selection in a travel form?

[eservices]

I’m working on a travel planning form that adjusts based on the selected nationality. For example, if someone picks a country like India, the form should display whether they need an electronic visa for places like Sri Lanka, and maybe show a short message or guide link.

I’m using JavaScript to detect changes in a <select> dropdown and send that to a PHP file via AJAX. The PHP checks a list and responds with JSON.

But I’m running into a few issues:

Sometimes the JSON response is empty, even though it works in the browser.

Other times, the DOM update doesn’t reflect the new message.

What’s the best structure to manage these types of dynamic, country-specific conditions without hardcoding everything in JS?

Any feedback appreciated — especially if you’ve done something similar for multi-country forms.

✅ This version:

Avoids links and commercial terms

Focuses on technical workflow (AJAX, PHP, JSON)

Mentions <link removed by moderator> as an example, not a pitch

[Dani]

I have moved your post into the web development forum instead of the advertising/marketing forum where it was and tagged it appropriately.

Can you please provide the Javascript code as well as PHP code that is buggy so that we can help diagnose this for you. For example, if the JSON response is empty, it is most likely because of a bug in the PHP code. If the DOM doesn't reflect the new message, then that's a javascript issue.

What’s the best structure to manage these types of dynamic, country-specific conditions without hardcoding everything in JS?

I would store them in some form of database that PHP would have access to, and pass back ot javascript. None of the specific conditions should be hardcoded in javascript. I'm confused what you mean by hardcoding country-specific conditions in javascript, and yet using AJAX to have the PHP check a list. Do you mean the country-specific conditions are hardcoded in PHP instead of PHP utilizing a database?

Please provide your code :)

[groverharleen]

Hello,

please use developer tool while working on HTML/PHP with AJAX.
in the console you can easily track what was the POST/GET request made to PHP file and what is the responses shared by PHP file.

try debugging response accordingly or if still you face any trouble, please do share screen shot of Header / Request / Response Tabs. i'll guide you from here what is needed.

Regards,
Harleen Grover
Best Web Dealers

[Biiim]

I felt like some fun, so I just put together an example for you using CDN's and bootstrap 5.

From what you are talking about you probably want to put some of that logic into the Javascript and not need to send a server request for each one, I usually do this kind of thing with javascript objects/arrays (eg settings['GB']['visa_req'] = false;settings['IN']['visa_req'] = true; then populate the form based on a selected country code) but it is up to you as long as you get something working. Just keep in mind that anything in Javascript can be messed around with, you need to make sure that the Server side controls the workflow - IE if a VISA is required you need to make sure the PHP checks it on the server side and don't trust the Javascript data as someone could flip it to false. I usually make arrays in PHP from a database and generate Javascript arrays from the PHP array so I don't have to make things twice, then on saving the PHP script always checks the database or PHP code for the actual value. Real users don't mess with the javascript so just be aware of possible ways of cheating the system and stop it from working but the real users will just use it as you programmed it.

I didn't include in my example an ajax request to a PHP page, my advice on that would be to print out messages at all the stages so you can see which logic it follows before it dies. My favourite for php is var_dump($var); and in javascript use console.log(var);

Here is an example AJAX request(with jQuery) and below is a working example of populating Form fields with an onchange event

var keepMyData;
$.ajax({
    method: "POST",
    url: "https://example.com/myajaxrequest.php",
    data: { var1: 'test', var2: 'something'}
}).done(function( msg ) {
    var data = JSON.parse(msg);
    keepMyData = data;
    //alert( "updated: " + msg );
    console.log(data);
    //dosomething(data)
}).fail(function() {
    alert( "error" );
}).always(function() {
    alert( "complete" );
});

working example switching countries(add in the scripts below it):

<!doctype html>
<html lang="en" data-bs-theme="auto">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <title>Example using javascript conditionals</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/countries-list@3.1.1/index.iife.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    </head>
    <body>
        <div class="container py-3">
            <div class="row">
                <div class="col-12">
                    <select id='currency_select' class="form-select btn btn-outline-secondary" onchange="updateFormValues(this.value);"></select>
                </div>
                <div class="col-12 mt-5">
                    <div class="input-group mb-3 justify-content-center">
                        <p class="h6 mb-0 input-group-text">Country Name</p>
                        <input type='text' id='name'/>
                    </div>
                </div>
                <div class="col-12">
                    <div class="input-group mb-3 justify-content-center">
                        <p class="h6 mb-0 input-group-text">Continent</p>
                        <input type='text' id='continent'/>
                    </div>
                </div>
                <div class="col-12">
                    <div class="input-group mb-3 justify-content-center">
                        <p class="h6 mb-0 input-group-text">Capital</p>
                        <input type='text' id='capital'/>
                    </div>
                </div>
                <div class="col-12">
                    <div class="input-group mb-3 justify-content-center">
                        <p class="h6 mb-0 input-group-text">Phone Code</p>
                        <input type='text' id='phone'/>
                    </div>
                </div>
                <div class="col-12">
                    <div class="input-group mb-3 justify-content-center">
                        <p class="h6 mb-0 input-group-text">ISO2 & ISO3</p>
                        <input type='text' id='iso2'/>&emsp;<input type='text' id='iso3'/> 
                    </div>
                </div>
                <div class="col-12">
                    <div class="input-group mb-3 justify-content-center">
                        <p class="h6 mb-0 input-group-text">Languages</p>
                        <select id='languages'></select>
                    </div>
                </div>
                <div class="col-12">
                    <div class="input-group mb-3 justify-content-center">
                        <p class="h6 mb-0 input-group-text">Currencies</p>
                        <select id='currencies'></select>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

<script type="text/javascript">
    $( document ).ready(function(){
        console.log( "ready!" );
        refreshCountryList();
    });
    function refreshCountryList(){
        var tmpHTML = '';
        $.each(Countries.getCountryDataList(), function(index,item){
            tmpHTML += '<option value="'+item.iso2+'">'+item.name+'</option>';
        });
        $('#currency_select').html(tmpHTML);
        $('#currency_select').select2();
    }
    function updateFormValues(iso2){
        var tmpData = Countries.getCountryData(iso2);
        console.log(tmpData);
        $('#name').val(tmpData.name);
        $('#continent').val(tmpData.continent);
        $('#capital').val(tmpData.capital);
        $('#iso2').val(tmpData.iso2);
        $('#iso3').val(tmpData.iso3);
        $('#phone').val(tmpData.phone);
        var tmpHTML = '';
        $.each(tmpData.languages, function(index,item){
            tmpHTML += '<option value="'+item+'">'+item+'</option>';
        });
        $('#languages').html(tmpHTML);
        var tmpHTML = '';
        $.each(tmpData.currency, function(index,item){
            tmpHTML += '<option value="'+item+'">'+item+'</option>';
        });
        $('#currencies').html(tmpHTML);
    }
</script>