Проблема с переключателями Javascript

У меня есть два переключателя — «итальянский» и «испанский». Когда один из них выбран, я не буду автозаполнения для «Main» и «Starter» входов, которые будут заполнены из разных файлов. Поэтому, когда «испанский» проверяется, он делает автозаполнение из http://xxx/spanish.php, и когда «итальянский» проверка, он делает его от 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>

Вызов ajax, etc, работает, но когда я пробую оператор if, поля не заполняются/автозаполнение.

Спасибо.

1 ответ

  1. Значение радио можно использовать в качестве url-адреса в ajax. И получить проверенное значение через селектор jquery.

     //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>