2017-09-25 19 views
0

我無法使用ID訪問技能值,但可以訪問finduserType值。一起致電變更並點擊事件jquery

我不知道爲什麼,它應該調用change事件和click事件。

$(function() { 


    $("#findUserType").change(function() { 
     var user_type = $("#findUserType").val(); 
     var skills = $("#skills").val(); 
     var phone = $("#phones").val(); 

    var src = '{{Request::root()}}/api/user/suggestion/email'; 
    var srcPhone = '{{Request::root()}}/api/user/suggestion/phone'; 


    /* var skills = $("#skills").val(); 

    var phone = $("#phones").val();*/ 
    // Load the Users from the server, passing the usertype as an extra param 
    $("#skills").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: src, 
       method: 'GET', 
       dataType: "json", 
       data: { 
        term : skills, 
        user_type : user_type 
       }, 
       success: function(data) { 
        response(data); 
       } 
      }); 
     }, 
     min_length: 3, 
     delay: 300 
    }); 

    // Load the Users from phone to the server, passing the usertype as an extra param 
    $("#phones").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: srcPhone, 
       dataType: "json", 
       data: { 
        term : phone, 
        user_type : user_type 
       }, 
       success: function(data) { 
        response(data); 
       } 
      }); 
     }, 
     min_length: 3, 
     delay: 300 
    }); 

    }); 

}); 
<form> 
    <div class="input-group"> 
     <select class="form-control" id="findUserType" name="finduser"> 
      <option value="">--Select--</option> 
      <option value="2">D</option> 
      <option value="3">P</option> 
     </select> 
    </div> 
    <div class="input-group"> 
     <input type="text" id="skills" class="form-control"> 
     <input type="text" id="phones" class="form-control" name="phone"> 
    </div> 
</form> 

更新代碼,請看看究竟我要去堅持不採取電子郵件的價值觀。當我調用ajax更改事件時,它確實工作正常,但技能值沒有任何價值。還建議我如何壓縮此代碼。我只是想根據技能和電話價值檢查變化事件調用ajax。

+1

您的JavaScript代碼中存在拼寫錯誤。您將在代碼結束時一直關閉第一個事件處理程序分配,而不是在事件處理程序結束時。所以其他事件處理程序被認爲是*裏面的第一個函數。 (提示:格式化您的代碼並使用明智的縮進使得這一點很明顯。) – David

+1

在另一個事件處理程序中定義事件處理程序是一個壞主意。內部事件處理程序不僅不會在第一個事件發生之前處於活動狀態,而且會在第一個事件重複時積累許多相等的事件處理程序:so:不要嵌套事件處理程序。 – trincot

回答

3

我認爲這將更好的工作:

$("#findUserType").change(function() { 
 
    if ($(this).val() == "") { 
 
    $("#textboxes").hide(); 
 
    } else { 
 
    $("#textboxes").show(); 
 
    } 
 

 
}); 
 

 
$("#skills").autocomplete({ 
 
    source: function(request, response) { 
 
    $.ajax({ 
 
     url: src, 
 
     method: 'GET', 
 
     dataType: "json", 
 
     data: { 
 
     term: $("#skills").val(), 
 
     user_type: $("#findUserType").val() 
 
     }, 
 
     success: function(data) { 
 
     response(data); 
 
     } 
 
    }); 
 
    }, 
 
    min_length: 3, 
 
    delay: 300 
 
}); 
 

 
// Load the Users from phone to the server, passing the usertype as an extra param 
 
$("#phones").autocomplete({ 
 
    source: function(request, response) { 
 
    $.ajax({ 
 
     url: srcPhone, 
 
     dataType: "json", 
 
     data: { 
 
     term: $("#phones").val(), 
 
     user_type: $("#findUserType").val() 
 
     }, 
 
     success: function(data) { 
 
     response(data); 
 
     } 
 
    }); 
 
    }, 
 
    min_length: 3, 
 
    delay: 300 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <select class="form-control" id="findUserType" name="finduser"> 
 
     <option value="">--Select--</option> 
 
     <option value="2">Doctor</option> 
 
     <option value="3">Pharmacy</option> 
 
    </select> 
 
    <br/> 
 
    <div id="textboxes" hidden> 
 
    <input type="text" id="skills" class="form-control"> 
 
    <br/> 
 
    <input type="text" id="phones" class="form-control" name="phone"> 
 
    </div> 
 
</form>

目前你的兩個後自動完成處理程序不綁定,直到「findUserType」的‘變’事件已經發生至少一次,因爲它們是在該代碼塊中聲明的。而且如果這個「更改」事件發生多次,那麼多個處理程序將被附加到其他兩個元素,然後當這些事件被觸發時,代碼的多個副本將運行 - 我懷疑這是你的意圖。

+0

我想根據更改事件調用ajax,所以我需要基於這兩個文本框的值finduserType更改事件 – Amy

+0

當前lyI'm獲得空白值的術語 電子郵件帳戶=&user_type = 2 – Amy

+0

@Amy您確定要手機文本框的點擊事件的值? – Niladri

2

#skills的更改處理程序和#phone的單擊處理程序只會在第一個更改事件觸發#findUserType之後註冊。

將這兩個處理程序移到#findUserType的更改處理程序之外。

0
$(document).ready(function(){ 

    $("#findUserType").change(function() { 

     var user_type = $(this).val(); 
    }); 

     $("#skills").change(function() { 
      var skills = $(this).val(); 
      var phone = $("#phones").val(); 
     }); 

     $("#phone").change(function() { 
      var phone = $(this).val(); 
     }); 

     }); 

我希望你能在選擇用戶類型時幫助你獲得技能和電話的價值。