Javascript Radio buttons issue

Question

I have two radio buttons - 'Italian' & 'Spanish'. When one is selected, I wont the autocomplete for 'Main' and 'Starter' inputs to be populated from different files. So when 'Spanish' is checked, it does autocomplete from http://xxx/spanish.php , and when 'Italian' is check, it does it from http://xxx/italian.php .

var radio1 = document.getElementById("radio1");
var radio3 = document.getElementById("radio3");

if (radio1.checked){
    alert("radio1 selected");


        //Starter Autocomplete  (Spanish)         
        var starterSearchData;
        $(function() {
            $.ajax({
                url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
                dataType: "jsonp",
                async: false,
                success: function(data) {
                    starterSearchData = $.map(data, function(item) {
                        if (item.course == "starter")
                            return item.name;
                    });
                    EnableAutoComplete();
                },
                error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });

            function EnableAutoComplete() {
                $("#starter").autocomplete({
                    source: starterSearchData,
                    minLength: 2,
                    delay: 010
                });
            }
        });

        //Main Autocomplete   (Spanish)          
        var mainSearchData;
        $(function() {
            $.ajax({
                url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
                dataType: "jsonp",
                async: false,
                success: function(data) {
                    mainSearchData = $.map(data, function(item) {
                        if (item.course == "main")
                            return item.name;
                    });
                    EnableAutoComplete();
                },
                error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });

            function EnableAutoComplete() {
                $("#main").autocomplete({
                    source: mainSearchData,
                    minLength: 2,
                    delay: 010
                });
            }
        });

}else if (radio3.checked) { .... same code, except url changed to http://xxx/italian.php... }

HTML:

<div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Spanish</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Italian</label>
</div>
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>

The ajax call, etc, works, but when i try the if statement, the fields do not populate/autocomplete.

Thanks.

Answer 1

You could use the value of the radio as the url in ajax. And retrieve checked value via jquery selector.

 //Starter Autocomplete  (Spanish)         
    var starterSearchData;
    $(function() {
        $.ajax({
            url: $("#radio input:checked").val(),
            dataType: "jsonp",
            async: false,
            success: function(data) {
                starterSearchData = $.map(data, function(item) {
                    if (item.course == "starter")
                        return item.name;
                });
                EnableAutoComplete();
            },
            error: function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });

        function EnableAutoComplete() {
            $("#starter").autocomplete({
                source: starterSearchData,
                minLength: 2,
                delay: 010
            });
        }
    });

    //Main Autocomplete   (Spanish)          
    var mainSearchData;
    $(function() {
        $.ajax({
            url: $("#radio input:checked").val(),
            dataType: "jsonp",
            async: false,
            success: function(data) {
                mainSearchData = $.map(data, function(item) {
                    if (item.course == "main")
                        return item.name;
                });
                EnableAutoComplete();
            },
            error: function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });

        function EnableAutoComplete() {
            $("#main").autocomplete({
                source: mainSearchData,
                minLength: 2,
                delay: 010
            });
        }
    });

HTML:

    <div id="radio">
    <input type="radio" id="radio1" name="radio" value="http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php"><label for="radio1">Spanish</label>
    <input type="radio" id="radio3" name="radio" value="http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/italian.php"><label for="radio3">Italian</label>
</div>
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>