JQuery.val() funktioniert nicht

Question

Ich versuche, einfach den Wert einer Eingabe zu erhalten, und es an eine Variable 'PLZ' anzuhängen. Wenn ich versuche, den Wert zu trösten, erscheint er jedoch leer.

$(document).ready(function(){ 
    var zipcode = $('.zipcode-search').val() 

    $('#button').on('click', function(){ 
    console.log(zipcode) 
    }) 

HTML

<div class="col-sm-12"> 
    <div class="text-center"> 
     <input class="text-center zipcode-search" type="text" name="zipcode-search" placeholder="Enter your city"/> 
     <button id="button" class="btn btn-success"> 
      Submit 
     </button> 

ich dies auf codepen.io tue. Ich bin mir nicht sicher, ob das etwas damit zu tun hat, aber ich dachte, ich könnte das hinzufügen. Gibt es einen anderen Weg als .val(), um den Wert eines Elements zu erhalten?

Answer 1

.zipcode-search, hat keinen Wert, wenn die Seite geladen wird, und der Wert Ihres Variable nur einmal vergeben werden, wenn die Seite geladen.

Wenn Sie Ihre Variable aktualisieren möchten, wenn auf Ihre Schaltfläche geklickt wird, müssen Sie Ihren Anruf an $.val in Ihrem click-Ereignishandler verschieben.

Hier ist ein Beispiel:

$(document).ready(function() { 
    var zipcode = null; 

    $('#button').on('click', function() { 
     zipcode = $(".zipcode-search").val(); 
     console.log(zipcode); 
    }); 
}); 

Hinweis, wie ich zipcode ein Wert von null beim Laden der Seite zuweisen, ich tat dies, weil die Chancen .zipcode-search einen Wert hat, wenn die Seite geladen wird, slim-to- sind keine ohne fortgeschrittenere Logik.

Bearbeiten: Beispiele, die in anderen Antworten enthalten sind, haben die Variable zipcode jedesmal neu deklariert, wenn das Klickereignis Ihrer Schaltfläche ausgelöst wird. Dies ist nicht benötigt.

Deklaration/Neudefinition der Variablen jedes Mal, wenn das click -Ereignis ausgelöst wird, macht diese Variable exklusiv für den Bereich Ihrer Callback-Funktion für das click -Ereignis, wodurch verhindert wird, dass Sie die Variable außerhalb dieses Callbacks wiederverwenden können.

Answer 2

Ich nehme an, Sie möchten zipcode bei jedem Klicken auf die Schaltfläche aktualisieren. Sie sollten diese Logik in Ihren Event-Handler verschieben.

$(document).ready(function(){ 

    $('#button').on('click', function(){ 
    var zipcode = $('.zipcode-search').val() 
    console.log(zipcode) 
    }) 

Answer 3

Sie sollten den Wert in der onClick Funktion erhalten.

$(document).ready(function(){ 
    $('#button').on('click', function(){ 
     var zipcode = $('.zipcode-search').val() 
     console.log(zipcode) 
    }); 
});