2016-12-30 134 views
0

我有兩個單選按鈕 - '意大利'&'西班牙語'。當選擇一個時,我不會使用從不同文件填充「主」和「入門」輸入的自動完成功能。所以當'西班牙'被選中時,它從http://xxx/spanish.php自動完成,當'意大利'被檢查時,它從http://xxx/italian.php執行。Javascript單選按鈕問題

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調用等,作品,但是當我嘗試的if語句,字段不填充/自動完成。

謝謝。

+0

您得到在控制檯有哪些誤區? – Curiousdev

+0

我會有一個ajax調用,並使用單選按鈕來設置正確的值在一個簡單的條件,或讓它發送url參數來過濾查詢/結果。例子'assignments /?Lang = ******&Course = ******'這樣你可以有一個php文件處理返回正確的查詢。 – NewToJS

+0

Curiousdev - 我得到的消息..「未捕獲的類型錯誤:無法讀取屬性'檢查'空」爲「if(radio1.checked){」行。 – Tatws24

回答

0

您可以使用無線電的值作爲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> 
+0

我用這段代碼得到錯誤「jquery-1.10.2.js:8143 Uncaught SyntaxError:Unexpected token」。這是否意味着我需要使用更新的版本? – Tatws24

+0

不知道你在哪裏得到錯誤。不,你不應該需要更新的版本。我剛剛添加了'code' $(「#radio input:checked」).val()'code'並將值添加到無線電輸入中 – pottedmeat7