Encrypting data on client side and passing it to server side
What information should be private?


The key should be private, everything else can be public (the iv, the source, etc).


  How is the logic here flawed


You are using a symmetric key algorithm, which means that the same key decrypts and encrypts data, which in turn means that you would have to exchange the key between the parties (which would need to happen over a different channel, for example paper mail).

What you actually need is an asymmetric algorithm, which has a public key for encryption and a private key for decryption.

If you need to encrypt more data than showing here, you can use an asymmetric algorithm to exchange the key of a symmetric algorithm (as asymmetric encryption is unpractically slow). This is how HTTPS works, for example.


  how should it be used to protect data communication between client and server side computing?


Use HTTPS. At the time, there really isn't an alternative for this. (well, you could use third party services such as OpenID). You definitely need asymmetric encryption, and you should definitely not write your own.

Misc


either always use camelCase or always snake_case, don't mix them without reason.
key256Bits500Iterations is quite descriptive, but I think key would be just fine as well, and easier to read (and what if you change it to 600 iterations? Either your name would be wrong, or you would need to change it).
encrypt doesn't just encrypt, it also changes the form. I would to this in a different function and just let encrypt do the encrypting. 
wherever you do the form manipulation, you should also set document.loginForm.password1.value to something else right there.