Question

I have a problem with this jQuery code. It doesn’t work as expected:

$('#select_dropdown').change ( function(){
    $('#form_to_submit').submit( function(event){
        $.post("process.php", { name: "John" },
    function(data) {
        alert("Data Loaded: " + data);
    });
    });
});

However, this works:

$('#select_dropdown').change ( function(){
    $('#form_to_submit').submit();
});

I wonder why the internal function on submit doesn’t work.
When a user selects a value from a dropdown, the form must be submitted. The second set of codes
work but if I add an inner function to submit, it doesn’t.

Basically, I want to do some ajax call after the user select on the dropdown.

Answer 1

The first code is creating an event handler for submit event on selector $(‘#list_count’) most likely a form element. The second code is calling the submit method on that element. The first one would be triggered when you submit the form using any method but it itself would not submit the form. What are you trying to do?

EDIT

Do you want to do this

$('#select_dropdown').change ( function(){
    $.post("process.php", { name: "John" }, function(data) {
        alert("Data Loaded: " + data);
    });
});