Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Changing your markup a bit so that it contains a bit more metadata, I've mocked up a quick answer to your question. </p> <p>Primarily, I added classes <code>fs-size</code> and <code>fs-type</code> to the fieldsets containing fields concerning with the size and type, respectively. It allows you to quickly reference them as a group in a CSS selector -- e.g. <code>$('.fs-size').hide()</code></p> <p>Then, I changed values in your <code>&lt;input/&gt;</code> and <code>&lt;select/&gt;</code> elements to reflect the real values you use (<code>value="1"</code> rather than <code>value="Size 1"</code> will save us the need to do parsing when we need to use the selected value to choose which <code>&lt;fieldset/&gt;</code> to show.</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" class="fs-type"&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="1" class="input-size"/&gt;Size 1&lt;br/&gt; &lt;input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="2" class="input-size" /&gt;Size 2&lt;br/&gt; &lt;input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="3" class="input-size" /&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" class="fs-type"&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="1" class="input-size" /&gt;Size 1&lt;br/&gt; &lt;input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="2" class="input-size" /&gt;Size 2&lt;br/&gt; &lt;input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="3" class="input-size" /&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" class="fs-type"&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="1" class="input-size"/&gt;Size 1&lt;br/&gt; &lt;input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="2" class="input-size"/&gt;Size 2&lt;br/&gt; &lt;input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="3" class="input-size" /&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" class="fs-size"&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" class="fs-size"&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" class="fs-size"&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> <p>Then the code becomes pretty straightforward, except for the bit I commented.</p> <pre><code>$('#jobType').change(function() { $('.fs-type').hide(); $('#fs_' + this.value).show(); // this was a bit tricky for me at first // hide all sizes and show only sizes previously selected // for this type $('.fs-size').hide(); $('#fs_' + this.value + ' .input-size:checked').each(function(i, el) { $('#fs_flyer_desc' + el.value).show(); }); }); $('.input-size').change(function() { var el = $('#fs_flyer_desc' + this.value); if (this.checked) { el.show(); } else { el.hide(); } }); $('#jobType').change(); $('.fs-size').hide(); ​ </code></pre> <p>The code hides all fields initially (the second-to-last line invokes the change event to achieve this, showing only the default selected option) and then shows only what was selected.</p> <p>This commented bit checks which checkboxes are checked inside the appropriate <code>.fs-type</code> fieldsets and resets which <code>.fs-size</code> fieldsets are displayed accordingly.</p> <p>I would add as a comment that since the only thing that is different between three <code>.fs-type</code> fieldsets is the title, you could have only one fieldset and simply change the caption, e.g. </p> <pre><code>$('#jobType').change(function() { $('.fs-type legend').html($(this).html()); }); </code></pre> <p>All code (except for the last line above) is available in thie fiddle: <a href="http://jsfiddle.net/YC7Xe/" rel="nofollow">http://jsfiddle.net/YC7Xe/</a></p> <p><strong>Edit</strong>: I added the demo for my last comment here: <a href="http://jsfiddle.net/YC7Xe/1/" rel="nofollow">http://jsfiddle.net/YC7Xe/1/</a> . It also declares two functions <code>updateType()</code> and <code>updateSize()</code> so as to reduce code duplication.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow can i apply jquery to this web form?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USYuval
    1. USYuval
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow can i apply jquery to this web form?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. CO+1 for extra effort!
      singulars
      1. PO
      1. USAndrewR
    2. COyep("+1 for extra effort!");
      singulars
      1. PO
      1. USundefined
    3. COThis is really well done, the issue is "class" is already being used for all the fields in the actual web app, so i have to use either the name, id which are all like this: 1506[], 3403[], etc. When I try to swap out the class and use the name, I get "unrecognized expression" error.
      singulars
      1. PO
      1. USuser1176783
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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