Override default javascript functionality with jQuery
- by deth4uall
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.
