ボタンを使用してAJAXに渡すフォームフィールド値を取り込みます（サブミットしません）

Question

私は1つの入力を持つ単純なフォームを持っています。ページは次の場所にあります。 Actual Page

は、私はすべてのページを更新せずにデータを、データを取得するために実行アヤックス、それをキャプチャし、フィールドからの入力を取る以下を示すためにDIVをトリガし、表示できるようにしたいですまたはリセットする。私は、VaRの値を定義した場合、このコードは動作します：

var query = '12'; 
$("#buttonToClick").click(function() { 
    $("#divToShow").show(); 
    $.post('ajax/part_detail_by_partno.php', { part: query }, function(data) { 
       $("#divToShow").html(data); 
    }); 
}); 

私はフィールド上でオートコンプリート機能を使用して、それでも無効になっています、以下は動作しません：私は

var query = $("#fieldWithData").val(); 
    $("#buttonToClick").click(function() { 
     $("#divToShow").show(); 
     $.post('ajax/part_detail_by_partno.php', { part: query }, function(data) { 
        $("#divToShow").html(data); 
     }); 
    }); 

実際にフォームを提出せずにデータを取り込むことができないためだと仮定します。だから私はフォームアクション（ページリロードなし）で "ボタン"を "送信"に変更しました。しかし、#divToShowはページリロードの結果として開かれません。私のページの「クイック検索」ボックスを見てください。ユーザーからの入力によって生成されたajax/part_detail_by_partno.phpから返されたデータを表示するために、divからトリガーするようにユーザーからの入力を取得するにはどうすればよいですか？私はこれを理解しようと時間を費やしました。私はjQueryとAJAXを初めて使っています。あなたの助けに感謝します！

Answer 1

クリックアクションの外側で「クエリ」の値をキャプチャしています。それを関数内に移動します。このよう

：

$("#buttonToClick").click(function() { 
    var query = $("#fieldWithData").val(); 
    $("#divToShow").show(); 
    $.post('ajax/part_detail_by_partno.php', { part: query }, function(data) { 
       $("#divToShow").html(data); 
    }); 
});