How to send to server only visible part of div?

Question

I am creating a form which allows the user to choose an email cover text template (the text for which is contained in a div), who to send the email to (an input box), and other options. When the user picks who to send the email to, the cover text (which contains receiver information) is updated with AJAX to reflect that choice. If the user puts in an invalid receiver, than the part of the cover text that displays the receiver is hidden. When the form is submitted, I want the cover text (contained in a div) to be sent to the server also.

I can think of 3 ways to do this while ensuring that the receiver part of the cover text will only be submitted if it is visible.

1. Use AJAX to set a server variable to the visible part of the cover text
2. Set a hidden form value to the visible part of the cover text
3. Actually add and subtract the HTML of the receiver info, don't just hide/show it

Which of these sounds like the best option? Or is some other way a better way to do it?

Answer 1

I'd go with the second option. The first seems like an overkill for a problem that can be solved otherwise. Good rule of thumb would be to keep the number of requests to as low as possible. Having one bigger request is usually better than two of 50% of the size (in some cases, parallel downloading/uploading can be better though).

Third option seems to be a bit more complicated than the second, so I'd stick with the second one. You can get all the required visible html by using the :visible selector and you'll be all good, no need to manually add/remove stuff and keep track of it.