Submit closest form with Jquery on change

Question

I have two select boxes, each in their own form. I want it so that when the user changes the selectbox value the form submits. I added some console logs for debugging and it appears that when I change the select boxes only the first console is being shown and it never advances past the submit which leads me to believe something is wrong there but I cant figure out what! Preemptively I was also wondering if for the post data I would have to $(this).closest('form').serialize() as opposed to what I currently have.

$('#usr_vcm, #usr_ma').change(function(){
    console.log('change triggered');
    $(this).closest('form').submit(function() {
        console.log('submit closest done');
        $.ajax({
            type: "POST",
            url: $(this).closest('form').attr('action'),
            data: $(this).serialize(),
            success: function(data){
                alert(data + 'hello');                    
            }
        });

    });           
});

Sample HTML

<form name="usr_vcm_frm" method="post" action="framework/AJAX/config_actions.php?config=view_create_modified" class="form-inline">
  <div class="controls docs-input-sizes">
    <select name="usr_vcm" class="select-ms" id="usr_vcm">
      <option value="1">Allow</option>
      <option value="0" <?php if ($row_config['usr_view_cm'] == '0') { echo 'selected'; } ?>>Do not allow</option>
    </select>
    <span style="margin-left:5px;">users to see the name of who created/modified a post</span> </div>
</form>
<form name="usr_ma_frm" method="post" action="framework/AJAX/config_actions.php?config=user_auto_active" class="form-inline">
  <div class="controls docs-input-sizes">
    <select name="usr_ma" class="select-ms" id="usr_ma">
      <option value="1">Allow</option>
      <option value="0" <?php if ($row_config['usr_auto_activ'] == '0') { echo 'selected'; } ?>>Do not allow</option>
    </select>
    <span style="margin-left:5px;">automatic activation of users after they complete the registration form <span class="error-color">(not recommended to allow)</span></span> </div>
</form>

Answer 1

Try this:

 $('#usr_vcm, #usr_ma').change(function(){
        $.ajax({
            type: "POST",
            url: $(this).closest('form').attr('action'),
            data: $(this).closest('form').serialize(),
            success: function(data){
                alert(data + 'hello');                    
            }
        });

});  

Working Fiddle

Answer 2

You are defining an event handler to be called when the form is submitted, but never actually submitting the form. Review the jQuery docs on submit for the distinctions in the method signatures. Instead define the 'submit' handler outside of your 'change' handler, and then trigger submit onchange:

$(function() {
    $('[name="usr_vcm_frm"], [name="usr_ma_frm"]').submit(function(e) {
        e.preventDefault();
        console.log('submit closest done');
        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){
                alert(data + 'hello');                    
            }
        });
    }); 

    $('#usr_vcm, #usr_ma').change(function(){
        console.log('change triggered');
        $(this).closest('form').submit();
    });
});

Answer 3

Here you are binding submit event, and not justy actually submitting the form, I mean:

$(this).closest('form').submit(function() {...

to submit form you have to do $(this).closest('form').submit(); without handler.

I would do something like this to handle form submit:

    $('.form-inline').submit(function(event) {
        event.preventDefault();

        console.log('submit closest done');

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){
                alert(data + 'hello');                    
            }
        });
    });     

and to submit form on change:

$('#usr_vcm, #usr_ma').change(function(){
    $(this).closest('form').submit();
});