CODEWITHSUNDEEP
jquery
actaeon
actaeon

Reputation: 695

Hiding <form> tag in jQuery

For some reason a <form> on my page won't hide/show using jQuery. I have other things in my form, like <div>s and <table>s, but I've isolated it down to these two input fields that are breaking it: http://jsfiddle.net/3SDvm/2/

<form>
    <div>Random text</div>
<input id="multi" type="radio" name="style" value="checkbox"/>
    <label for="multi">Multiple options</label>

<input id="single" type="radio" name="style" value="radio" />
    <label for="single">Single option</label>
</form>​

$(document).ready(function() {
   $('form').slideUp(); 
});​

Is this normal behavior, or is there something I'm doing wrong? Tested on Chrome/IE/FF/Safari..

Upvotes: 3

Views: 1089

Answers (3)

Dave Methvin
Dave Methvin

Reputation: 1468

Any time you use a name for a form field that matches a property or method of the parent form itself, this can happen. That includes style, but also id, action, submit, length, etc. jQuery attempts to work around this but there are still situations where it can occur. For more technical detail see here: http://kangax.github.com/domlint/

Upvotes: 2

davidbuzatto
davidbuzatto

Reputation: 9424

Enclose the form content using a div and hide/show that div. I updated your fiddle: http://jsfiddle.net/davidbuzatto/3SDvm/7/

With DerWaldschrat solution, each child will be hide/show individually, messing with the behavior that you want.

Edit: I updated the fiddle again with three ways to select the inner div and slide it up. Take a look: http://jsfiddle.net/davidbuzatto/3SDvm/9/

Upvotes: 5

DerWaldschrat
DerWaldschrat

Reputation: 1915

Instead of hiding the form, which is an element with no real appearance, try to hide all children:

$("form *").hide();

Upvotes: 4

Related Questions