jquery charger les données lors de la saisie (par opposition à cliquer)

Question

Sur une section de mon site Web, je demande à mes clients leur code postal et leur pays. Les tarifs d'expédition sont chargés à partir d'une autre page une fois qu'ils entrent ces informations et cliquez sur calculer le lien. Maintenant, je veux enlever le bouton de clic et une fois que ces informations sont entrées, je veux que les utilisateurs voient charger l'image et charger les données immédiatement. Je me demandais si c'était possible et s'il y avait des exemples.

$(document).ready(function() { 
$("#link").click(function() { 
     $.ajax({ 
      type: "GET", 
      data: { PROCESS: "UPS", WEIGHT: "<%=Session("TotalWeight")%>", POSTALCODE: $(document.getElementsByName("ShippingPostalCode")).val(), COUNTRY: $(document.getElementsByName("ShippingCountry")).val() }, 
      url: "content/checkout/step1/index.cs.asp", 
      success: function(output) { 
      $("#sonuc").html(output); 
      $("#sonuc").css("display", "block"); 
      } 
     }); 
    }); 
}); 

Mise à jour rapide! J'ai permis à mes clients de stocker des adresses pour une utilisation future. Si une adresse est enregistrée, ils peuvent copier et coller l'adresse en un clic. Voici le code pour que:

function StoredData(){ 
    $.get("includes/ajaxfunctions.asp?Process=checkout1", { QUERY: $(document.getElementsByName("CUSTOMERDETAILNAME")).val() }, function(data){ 
     $("div.StoredData").html(data); 
    }); 
} 

---

$(document).ready(function() { 
    $("input[name=ShippingPostalCode]").livequery("change", function() { 
     $.ajax({ 
      type: "GET", 
      data: { PROCESS: "UPS", WEIGHT: "<%=Session("TotalWeight")%>", POSTALCODE: $(document.getElementsByName("ShippingPostalCode")).val(), COUNTRY: $(document.getElementsByName("ShippingCountry")).val() }, 
      url: "content/checkout/step1/index.cs.asp", 
      success: function(output) { 
       $("#sonuc").html(output); 
      } 
     }); 
    }); 
}); 

Answer 1

Je suppose que votre StoredData div contient ces entrées. En écrivant $("div.StoredData").html(data), vous remplacez les entrées auxquelles les gestionnaires d'événements enregistrés par de nouveaux éléments d'entrée ne correspondent pas. Vous devez réenregistrer vos gestionnaires d'événements chaque fois que vous faites cela.

La façon la plus simple de le faire est d'utiliser le plugin jQuery LiveQuery, comme ceci:

$("input[name=ShippingPostalCode]").livequery("change", /*your function*/); 

Exécuter cette fois sur la charge, et tout devrait bien fonctionner. Vous pouvez également réenregistrer vos gestionnaires après le rappel AJAX, après avoir exécuté $("div.StoredData").html(data). Enfin, vous pouvez également modifier votre requête AJAX (ajaxfunctions.asp?Process=checkout1) pour renvoyer les données au format JSON au lieu du code HTML contenant les données et mettre à jour vous-même les valeurs des éléments existants. C'est la solution la plus rapide.

Answer 2

$(document.getElementsByName("ShippingPostalCode")).change(/*your function*/);