Ajax Form submission on select change

Question

I am trying to submit a form with the class '.basket-form' on change of a select field with the id '#shipping_country'.

I have tested the on change event, and its running.

For some reason I can't get the form to submit.

$('.basket-form #shipping_country').on('change', function() {
    $('.basket-form').ajaxForm({
        dataType: 'json',
        beforeSubmit: function() {
             $('.shipping-val p').text('Loading...');
             $('.tax-val p').text('Loading...');
             $('.total-val p').text('Loading...');
        },
        success: function(data) {
             $('.shipping-val').html('<p>'+data.order_shipping_total+'</p>');
             $('.tax-val').html('<p>'+data.order_tax+'</p>');
             $('.total-val').html('<p>'+data.order_total+'</p>');
        }
    });
});

Anyone got any ideas?

Answer 1

I've flagged this for closure because it's not really an EE problem but one to do with jQuery.

But to help you, why not just do this;

$('#selectbox').on('change',(function(){
    $('#myForm').submit();
});

Then bind the Ajax to the submit event elsewhere.

Would that work?