JavaScript removing contents of form hidden by animatedcollapse.hide

Question

I'm using JavaScript to hide and show div contents within a simple web form I made.

However, I noticed that the submitted form (it sends the form as a dictionary to Python CGI) may still contain nonempty submitted values for hidden items. Usually, this happens because you enter some values into field X, click a link that hides the div containing field X, and then submit.

I know that I can manually clear all of the input fields (i.e. field X, etc.) in a div when the div is hidden, but is there a more elegant way to accomplish this?

Answer 1

With jQuery, you can make DOM manipulation both easy and elegant.

For your needs, you can remove hidden input elements before submitting: http://jsfiddle.net/tTzn2/.

$("form").submit(function() {
    $(this).find(":hidden").remove(); // hide hidden elements before submitting
});