Call change und click event zusammen jquery

Question

Ich bin nicht in der Lage, Zugriff auf Fähigkeiten Wert mit ID, während ich finduserType Wert zugreifen kann.

Ich weiß nicht, warum, sollte Change Event und Klick Ereignis auch aufrufen.

$(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> 

der Code aktualisiert einen Blick bitte, was genau stecken ich werde es nicht E-Mail-Werte übernimmt. Wenn ich ajax change anruft, funktioniert das Event gut, aber der Skillwert hat keinen Wert. Schlage auch vor, wie ich diesen Code komprimieren kann. Ich möchte nur auf Änderung Ereignis Anruf Ajax Basis auf Fähigkeiten und Telefon Werte überprüfen.

Answer 1

Ich denke, das wird besser funktionieren:

$("#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>

Derzeit Ihre zwei später zur automatischen Vervollständigung Handler werden erst die „findUserType“ 's ‚change‘ -Ereignis gebunden hat mindestens einmal passiert , weil sie innerhalb dieses Codeblocks deklariert sind. Und auch wenn dieses "change" -Ereignis mehrere Male passiert, werden mehrere Handler an die anderen zwei Elemente angehängt, und wenn diese Ereignisse ausgelöst werden, werden mehrere Kopien des Codes ausgeführt. Ich bezweifle, dass Sie das beabsichtigt haben.

Answer 2

Der Change-Handler für #skills und der Click-Handler für #phone werden erst registriert, nachdem das erste Änderungsereignis auf #findUserType ausgelöst wurde.

Verschieben Sie diese beiden Handler außerhalb des Änderungshandlers von # findUserType.

Answer 3

$(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(); 
     }); 

     }); 

Ich hoffe, dass Sie dies wird Ihnen helfen, die Werte von Fähigkeiten und Telefon erhalten, wenn Benutzertyp ausgewählt ist.