2012-05-29 23 views
5

HTML:jQuery。ボタンクリックイベントでテキスト入力フィールドの値を取得しますか?

<div id="search"> 
    <input id="term" type="text" value="enter your search" /> 
    <button id="hit" type="button" name="">Search</button> 
</div> 

のjQuery:

$(document).ready(function() { 
    var term = $('#term').val(); 
    $('#hit').click(function() { 
    alert(term); 
    }); 
}); 

問題は関係なく、私が入力フィールドに入力した後、ボタンを押していない、ということです、それは常に "である元の入力値を警告しますあなたの検索を入力してください "。

どうすれば修正できますか?

答えて

15

問題は、このコードブロック全体がDOM準備完了イベントで実行されることです。

var term = $('#term').val();は一度だけ評価されており、用語変数に「検索を入力」が格納されています。これは、値をどのように変更しても、ページがレンダリングされたときに変数が初期値を保持する理由です。

代わりに何をやるべきことは、より以下のようなものです:このコードのビットで

jQueryの

$(document).ready(function() { 
    $('#hit').click(function() { 
    alert($('#term').val()); 
    }); 
}); 

、IDの用語を持つ要素の値が評価されたときにclickイベントリスナーの火災。

3

はあなたではなく、文書の準備ができているちょうどその時あなたは、変数を作成したので... がクリック機能内部変数「という用語を」作成しようdocument ready

$(document).ready(function() { 
    $('#hit').click(function() { 
    var term = $('#term').val(); 
    alert(term); 
    }); 
}); 
5

よりも、click上の値を取得する必要があります。 ..

$(document).ready(function() { 
     $('#hit').click(function(event) { 
      var term = $('#term').val(); 
      alert(term); 
     }); 
    });​