Question

I have a simple form with one input. The page is located here:
Actual Page

I want to be able to take the input from the field, capture it, run ajax to get the data, trigger a div to show below, and display the data without any page refresh or reset. If I define the var value, this code works:

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

I am using an auto-complete feature on the field, but even disabled, the following does not work:

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

I’m assuming it’s because I cannot cannot capture the data without actually submitting the form. So I changed the “button” to a “submit” with no form action (no page reload). But then #divToShow does not open as a result of a page-reload. Take a look at the “Quick Find” box on my page. How can I get the input from the user to trigger the div to display the data returned from ajax/part_detail_by_partno.php generated by the input from the user? I’ve spent hours trying to figure this out. I am new to jQuery and AJAX, and I appreciate your help!

Answer 1

You’re capturing the value of “query” outside the click action. Move it inside the function.

Like this:

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