I have 2 radio buttons and i want to make a different ajax page load into a div element depending on which one is selected

user_4187846 0
Viewed 59

I have 2 Radio Buttons that are used to select between 2 locations so that a different PHP page can be loaded from an external file when selected. But the file does also need to have an automatic refresh so that it can show the most up to date information every 3 minutes.

These are my radio buttons:

<div class="locationdrop">
    <div class="dropbtn">Location</div>
        <div class="locationlist">
            <input type="radio" id="location1" name="location" value="Location 1" class="locationinput" checked="checked">
            <label for="location1" class="locationlabel">Location 1</label>
            <input type="radio" id="location2" name="location" value="Location 2" class="locationinput">
            <label for="location2" class="locationlabel">Location 2</label>
        </div>
    </div>
</div>

This is my Script (using an auto updating AJAX):

<script>
    $(document).ready(function() {
        function getData() {
            if(document.getElementById('location1').checked) {
                $.ajax({
                    type: 'POST',
                    url: 'location1data.php',
                    success: function(data){
                        $('#locationoutput').html(data);
                    } 
                });
            }else if(document.getElementById('location2').checked) {
                $.ajax({
                    type: 'POST',
                    url: 'location2data.php',
                    success: function(data){
                        $('#locationoutput').html(data);
                    } 
                });
                getData();
                setInterval(function () {
                    getData(); 
                }, 120000);  // it will refresh your data every 3 mins
            };
        };
    });
</script>

This is my original (working) code to load the php into the div:

<script>
    $(document).ready(function(){
        function getData(){
            $.ajax({
                type: 'POST',
                url: 'locationData.php',
                success: function(data){
                    $('#locationoutput').html(data);
                }
            });
        }
        getData();
        setInterval(function () {
            getData(); 
        }, 120000);  // it will refresh your data every 1 sec
     });
</script>

I just need it to choose between 2 of these using the radio buttons.

Assistance would be greatly appreciated :)

jquery javascript
2 Answers

Try this:

$(document).ready(function() {
    function getData() {
        if(document.getElementById('location1').checked) {
            $.ajax({
                type: 'POST',
                url: 'location1data.php',
                success: function(data){
                    $('#locationoutput').html(data);
                } 
            });
        }else if(document.getElementById('location2').checked) {
            $.ajax({
                type: 'POST',
                url: 'location2data.php',
                success: function(data){
                    $('#locationoutput').html(data);
                } 
            });
        };
    };

    getData();
    setInterval(function () {
        getData(); 
    }, 120000);  // it will refresh your data every 3 mins
});

This is more efficient

$(document).ready(function() {
    let location_one = document.getElementById('location1');
    let location_two = document.getElementById('location2');

    let getLocationOneData = function () {
        $.ajax({
            type: 'POST',
            url: 'location1data.php',
            success: function(data){
                $('#locationoutput').html(data);
            }
        });
    };

    let getLocationTwoData = function () {
        $.ajax({
            type: 'POST',
            url: 'location2data.php',
            success: function(data){
                $('#locationoutput').html(data);
            }
        });
    };

    let getData = function () {
        if (location_one.checked) {
            getLocationOneData();
        } else if (location_two.checked) {
            getLocationTwoData();
        }
    }

    location_one.addEventListener('change', function () {
        if (this.checked) {
            getLocationOneData()
        }
    });

    location_two.addEventListener('change', function () {
        if (this.checked) {
            getLocationTwoData();
        }
    });

    setInterval(function () {
        getData();
    }, 120000);  // it will refresh your data every 3 mins
});
user_62348740

simply set URL value in variable, var myURL = "location2data.php"; use it such

$.ajax({
            type: 'POST',
            url: myURL,  //// here 
            success: function(data){
                $('#locationoutput').html(data);
            }
user_43378080
Related