Note that there are some explanatory texts on larger screens.

plurals
  1. POShow/Hide DIV section onchange and onload with Javascript
    primarykey
    data
    text
    <p>I thought I had this figured out but I was wrong. I have a xsl form that I would like to toggle or show/hide a section when a specific value is selected or present on the form. I'm limited to JavaScript and I appreciate all the help.</p> <ol> <li>When user selects option, hidden div section shows and</li> <li>When form is loaded and that value is present, div section shows</li> </ol> <p>Here is the sample HTML I would like to work from to figure this out:</p> <pre><code>&lt;select name="sbFruit" id="sbFruit" style="display:none;" title="Select your Fruit"&gt; &lt;xsl:variable name="sbFruit" select="Fruit" /&gt; &lt;xsl:for-each select="document('FRUIT_Lookups.xml')/lookups/FruitTypes/Fruit"&gt; &lt;xsl:variable name="optFruit" select="value" /&gt; &lt;option&gt; &lt;xsl:if test="$sbFruit = $optFruit"&gt; &lt;xsl:attribute name="selected"&gt;true&lt;/xsl:attribute&gt; &lt;/xsl:if&gt; &lt;xsl:attribute name="value"&gt; &lt;xsl:value-of select="value"/&gt; &lt;/xsl:attribute&gt; &lt;xsl:value-of select="value"/&gt; &lt;/option&gt; &lt;/xsl:for-each&gt; &lt;/select&gt; &lt;!-- Toggled Group when 'sbFruit' = Orange --&gt; &lt;div id="AppleSubGroup" name="AppleSubGroup" style="display: none;&gt;" &lt;label id="Orange_Fresh"&gt;Is the Orange Fresh?&lt;/label&gt; &lt;input name="Fresh" type="radio" value="Yes" /&gt;Yes &lt;input name="Fresh" type="radio" value="No" /&gt;No &lt;br /&gt; &lt;label id="Orange_moldy"&gt;Is the Orange moldy?&lt;/label&gt; &lt;input name="Red" type="radio" value="Yes" /&gt;Yes &lt;input name="Red" type="radio" value="No" /&gt;No &lt;/div&gt; </code></pre> <p>XML Fruit Choices:</p> <pre><code>Apple Blueberry Orange Pear </code></pre> <p>or Simple HTML Version:</p> <pre><code>&lt;select id="sbFruit" name="sbFruit"&gt; &lt;option&gt;Apple&lt;/option&gt; &lt;option&gt;Blueberry&lt;/option&gt; &lt;option&gt;Orange&lt;/option&gt; &lt;option&gt;Pear&lt;/option&gt; &lt;/select&gt; &lt;!-- Toggled Group when 'sbFruit' = Orange --&gt; &lt;div id="AppleSubGroup" name="AppleSubGroup" style="display: none;&gt;" &lt;label id="Orange_Fresh"&gt;Is the Orange Fresh?&lt;/label&gt; &lt;input name="Fresh" type="radio" value="Yes" /&gt;Yes &lt;input name="Fresh" type="radio" value="No" /&gt;No &lt;br /&gt; &lt;label id="Orange_moldy"&gt;Is the Orange moldy?&lt;/label&gt; &lt;input name="Red" type="radio" value="Yes" /&gt;Yes &lt;input name="Red" type="radio" value="No" /&gt;No &lt;/div&gt; </code></pre> <p>Thanks for helping!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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