使用按鈕捕獲表單域值以傳入AJAX（不提交）

Question

我有一個簡單的輸入形式。該頁面位於： Actual Page

我希望能夠把輸入來自外地，捕捉它，運行Ajax來獲取數據，觸發一個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不會因頁面重新加載而打開。看看我的頁面上的「快速查找」框。我怎樣才能從用戶的輸入觸發div顯示從用戶輸入生成的ajax/part_detail_by_partno.php返回的數據？我花了數小時試圖弄清楚這一點。我是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); 
    }); 
});