I am trying to overwrite a JavaScript on change event in the below code with jQuery however I believe that the inline JavaScript is taking priority over the jQuery functionality declared. Essentially I am trying to have an AJAX version of my site which includes an additional JavaScript file. I need this functionality to still work without the additional AJAX version, but I am not sure as to whether I should include it in the main JavaScript file or leave it inline like it is right now. Any suggestions and information regarding them would be greatly appreciated! Thanks!

<form action="/cityhall/villages/" method="post" name="submit_village">
    <select name="village" onchange="document.submit_village.submit();">
        <option value=""></option>
    </select>
</form>

I am trying to use the jQuery Form Plugin to submit the posts to the PHP to handle the requests as follows:

var bank_load_options = { 
    target:        '#content',
    beforeSubmit:  showRequest,
    success:       showResponse
};
$('form.get_pages').livequery(function(){
    $(this).ajaxForm(bank_load_options);
    return false;
});

I modified the code as following:

<form action="/cityhall/villages/" method="post" id="submit_village" name="submit_village">
    <select name="village" class="get_pages" rel="submit_village">
        <option value=""></option>
    </select>
</form>

<script>
# main JavaScript
$('.get_pages').live('change',function(e){
    var submit_page = $(this).attr('rel');
    $("#"+submit_page).submit();
});

# ajax JavaScript
var bank_load_options = { 
    target:        '#content',
    beforeSubmit:  showRequest,
    success:       showResponse
};
$('.get_pages').live('change',function(){
    var submit_page = $(this).attr('rel');
    $("#"+submit_page).ajaxForm(get_pages_load_options);
    return false;
});
</script>

However now it only runs every other option when I change it.