Databases
StackOverflow2013
Postsdbo
POShow/Hide divs on form submit
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShow/Hide divs on form submit
    text
    copied!<p>I have worked out about 90% of this, but can't seem to get the last 10%:</p> <p>I have a form that asks the user to select a location. On select, I want the page (and the request form) to fade in opacity, and a new div to fade up on top with pricing information.</p> <p>Right now, everything works as expected for the first selected option (novato), but on any other option in the list, the page and request form divs both fade out, and the new pricing div isn't visible.</p> <p>I'm stumped, and pretty sure I'm just missing something stupid (being a newbie). Any help is appreciated!</p> <p>the request form:</p> <pre><code>&lt;form id="locations"&gt; &lt;select&gt; &lt;option&gt;Choose a location&lt;/option&gt; &lt;option&gt;&lt;/option&gt; &lt;option id="novato" value="novato"&gt;Novato&lt;/option&gt; &lt;option id="sanleandro" value="sanleandro"&gt;San Leandro&lt;/option&gt; &lt;option id="livermore" value="livermore"&gt;Livermore&lt;/option&gt; &lt;option id="sanjose" value="sanjose"&gt;San Jose&lt;/option&gt; &lt;/select&gt; &lt;input type="submit" id="submit" value="go"/&gt; &lt;/form&gt; </code></pre> <p>The JS:</p> <pre><code>&gt; $(function() { &gt; $("#locations").submit(function() { &gt; if ($("#novato").attr("selected")) { &gt; $("#pricing_novato").fadeIn("normal"); &gt; $("#page").fadeTo("normal", 0.1); &gt; $("#pricing_novato").css({top:"0",left:"50%",margin:"20px &gt; 0 0 -"+($("#pricing_novato").width() / &gt; 2)+"px"}); &gt; $("#pricing_selector").fadeOut("normal"); }else if($("#sanleandro").attr("selected")) { &gt; $("#pricing_sanleandro").fadeIn("normal"); &gt; $("#page").fadeTo("normal", 0.1); &gt; $("#pricing_sanleandro").css({top:"0",left:"50%",margin:"20px &gt; 0 0 &gt; -"+($("#pricing_sanleandro").width() / 2)+"px"}); &gt; $("#pricing_selector").fadeOut("normal"); }else if($("#livermore").attr("selected")) { &gt; $("#pricing_livermore").fadeIn("normal"); $("#page").fadeTo("normal", 0.1); &gt; $("#pricing_livermore").css({top:"0",left:"50%",margin:"20px &gt; 0 0 &gt; -"+($("#pricing_livermore").width() / 2)+"px"}); &gt; $("#pricing_selector").fadeOut("normal"); }else if($("#sanjose").attr("selected")) { &gt; $("#pricing_sanjose").fadeIn("normal"); &gt; $("#page").fadeTo("normal", 0.1); &gt; $("#pricing_sanjose").css({top:"0",left:"50%",margin:"20px &gt; 0 0 -"+($("#pricing_sanjose").width() &gt; / 2)+"px"}); &gt; $("#pricing_selector").fadeOut("normal"); } }); }); </code></pre> <p>The divs:</p> <pre><code>&lt;div id="pricing_novato"&gt;content&lt;/div&gt; &lt;div id="pricing_sanleandro"&gt;content&lt;/div&gt; &lt;div id="pricing_livermore"&gt;content&lt;/div&gt; &lt;div id="pricing_sanjose"&gt;content&lt;/div&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