jQuery - Can I mix mulitple JS code that processes different forms into on JS

Question

Hello all,

I have designed several web forms each of which links to a single form_operation.js. This JS file handles all kinds different interaction on different forms.

It works so far for me. My question is: Are there some potential problems I will have in the future?

For example, Assuem I have two forms a) login.php b) register.php.

Each form has defined different DIVs with different IDs. When login.php loads the form_operation.js, it can see some DIVs that are defined in register.php.

Most code is embedded into

/////////////// form_operation.js  ////////////////////
function fun1() {}
function fun2() {}
$(document).ready(function() { // handle form 1.. } );
$(document).ready(function() { // handle form 1 & 2.. } );
$(document).ready(function() { // handle form 1 } );

Thank you

Answer 1

As long as the code isn't interdependent (e.g. one document.ready handler doesn't dely on another to be executed first) then you're ok mixing and matching event handlers as needed.

If you posted your markup I could give a bit more advice here, but from what you have, there's not immediately anything wrong. As a general rule, combine what you can where it makes sense and it's more maintainable to do so, but the cost of rigging up multiple document.ready handlers is very low...so use as many as makes sense for your application. Just make sure they don't depend on each other, if they do you should explicitly call them in the order they need to run.