Databases
StackOverflow2013
Postsdbo
POHow can i apply jquery to this web form?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can i apply jquery to this web form?
    text
    copied!<p>I've just started working with Jquery- find it very cool and easy. I have a small project that I would like to apply jquery to, but my code has just gotten ugly and long so am seeking help in to the following:</p> <p>onload of this form I want to hide all the subsections, then when you select <strong>Flyer</strong> from the <strong>Type</strong> dropdown the <strong>Flyer</strong> fieldset section should appear. When you select <strong>Banner</strong> from the <strong>Type</strong> dropdown the <strong>Banner</strong> fieldset section should appear and all others disappear.</p> <p>Now in the <strong>banner</strong> *<em>fieldset</em>*, if you select "<strong>Size 1</strong>" <strong>checkbox</strong>, the Size 1 - Details fieldset should appear and so on. </p> <p>Could someone show me the cleanest, efficient way of accomplishing this with jquery?</p> <pre><code>&lt;form action="" method="post"&gt; &lt;fieldset name="fs_mainInfo"&gt; &lt;legend&gt;Main Info&lt;/legend&gt; &lt;table style="width: 100%"&gt; &lt;tr&gt; &lt;td style="width: 255px"&gt;&lt;label id="Label1"&gt;First Name&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;input id="fname" name="fname" type="text" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="width: 255px"&gt;Last Name&lt;/td&gt; &lt;td&gt;&lt;input id="lname" name="lname" type="text" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="width: 255px"&gt;&lt;label id="Label2"&gt;Type&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;select id="jobType" name="jobType"&gt; &lt;option value="Flyer"&gt;Flyer&lt;/option&gt; &lt;option value="Banner"&gt;Banner&lt;/option&gt; &lt;option value="Postcard"&gt;Postcard&lt;/option&gt; &lt;/select&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="width: 255px"&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;fieldset name="fs_flyer" id="fs_flyer"&gt; &lt;legend style="color:blue"&gt;Flyer&lt;/legend&gt; &lt;table style="width: 100%"&gt; &lt;tr&gt; &lt;td style="width: 188px"&gt;&lt;label id="Label1"&gt;Sizes:&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="Size 1" /&gt;Size 1&lt;br/&gt; &lt;input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="Size 2" /&gt;Size 2&lt;br/&gt; &lt;input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="Size 3" /&gt;Size 3&lt;br/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;fieldset name="fs_banner" id="fs_banner"&gt; &lt;legend style="color:blue"&gt;Banner&lt;/legend&gt; &lt;table style="width: 100%"&gt; &lt;tr&gt; &lt;td style="width: 188px"&gt;&lt;label id="lblBannerSize"&gt;Sizes:&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="Size 1" /&gt;Size 1&lt;br/&gt; &lt;input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="Size 2" /&gt;Size 2&lt;br/&gt; &lt;input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="Size 3" /&gt;Size 3&lt;br/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;fieldset name="fs_postcard" id="fs_postcard"&gt; &lt;legend style="color:blue"&gt;Postcard&lt;/legend&gt; &lt;table style="width: 100%"&gt; &lt;tr&gt; &lt;td style="width: 188px"&gt;&lt;label id="lblPostcardSize"&gt;Sizes:&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="Size 1" /&gt;Size 1&lt;br/&gt; &lt;input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="Size 2" /&gt;Size 2&lt;br/&gt; &lt;input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="Size 3" /&gt;Size 3&lt;br/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;fieldset name="fs_flyer_desc1" id="fs_flyer_desc1"&gt; &lt;legend style="color:maroon"&gt;Size 1 - Details&lt;/legend&gt; &lt;table style="width: 100%"&gt; &lt;tr&gt; &lt;td style="width: 188px"&gt;&lt;label id="lblFlyerDescription"&gt;Description:&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;textarea name="TextArea1" cols="30" rows="5"&gt;&lt;/textarea&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;fieldset name="fs_flyer_desc2" id="fs_flyer_desc2"&gt; &lt;legend style="color:maroon"&gt;Size 2 - Details&lt;/legend&gt; &lt;table style="width: 100%"&gt; &lt;tr&gt; &lt;td style="width: 188px"&gt;&lt;label id="lblFlyerDescription2"&gt;Description:&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;textarea name="sizeOneDesc2" id="sizeOneDesc2" cols="30" rows="5"&gt;&lt;/textarea&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;fieldset name="fs_flyer_desc3" id="fs_flyer_desc3"&gt; &lt;legend style="color:maroon"&gt;Size 3 - Details&lt;/legend&gt; &lt;table style="width: 100%"&gt; &lt;tr&gt; &lt;td style="width: 188px"&gt;&lt;label id="lblFlyerDescription3"&gt;Description:&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;textarea name="sizeOneDesc3" id="sizeOneDesc3" cols="30" rows="5"&gt;&lt;/textarea&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload