Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>So, the question, as I understand it is: "How do I show and hide form fields based on the value of a <code>&lt;select&gt;</code>?"</p> <p>Before we get started, this is a <a href="https://stackoverflow.com/q/835259/168868">dupe</a>. I'm <em>deeply</em> unsatisfied with the quality of answers there, so I'm going to fly in the face of convention and post my own.</p> <p>First things first, all of the other answers here are totally on the right track, but they currently fail to explain <em>why</em> they do what they do.</p> <p>Like others, I'm going to use <a href="http://jquery.com/" rel="nofollow noreferrer">jQuery</a> in this example. jQuery is an awesome Javascript library that greatly eases a bunch of repetitive, verbose tasks. jQuery exposes an function called <code>$</code> -- yes, just a dollar sign -- that lets you access and modify the page.</p> <h3>Step 1</h3> <p>Let's create a minimal example, similar to your existing code.</p> <pre><code>&lt;form&gt; &lt;select name="select1" id="select1"&gt; &lt;option value="1"&gt;account 001&lt;/option&gt; &lt;option value="2"&gt;account 002&lt;/option&gt; &lt;option value="3"&gt;blue 001&lt;/option&gt; &lt;/select&gt; &lt;input type="text" name="text1" id="text1"&gt; &lt;/form&gt; </code></pre> <p>Important things to point out:</p> <ol> <li>Modern HTML requires that attribute values (<code>value="1"</code>) be quoted.</li> <li>All the elements we need to target with jQuery need to be easily identifiable. We're using <code>id</code>s here.</li> </ol> <h3>Step 2</h3> <p>Let's attach an <a href="http://api.jquery.com/category/events/" rel="nofollow noreferrer">event listener</a>. Events are things that happen while you interact with the page. In our case, we're going to listen to the <code>&lt;select&gt;</code> for the <code>change</code> event.</p> <pre><code>&lt;script type="text/javascript"&gt; $(function() { $('#select1').on('change', function(event) { alert(this.value); }); }); &lt;/script&gt; </code></pre> <p>That's a whole lot of jargon in not much space. Let me explain a bit.</p> <ul> <li><code>$()</code> is a function call to jQuery.</li> <li><code>$(function(){ ... })</code> is passing a <em>function</em> to the jQuery object. This is a <em>shortcut</em> that says "jQuery, when the page is done loading, run this function."</li> <li><code>$('#select1')</code> asks jQuery to find the element <code>id</code>'d with "select1"</li> <li><code>$('#select1').on('change', function ...)</code> asks jQuery to watch for the <code>change</code> event, and execute the requested function.</li> <li>Finally, inside the function itself, we're going to throw an <code>alert</code> dialog with the current value of the <code>select</code> element.</li> </ul> <p>Here's a <a href="http://jsfiddle.net/ZBL4c/" rel="nofollow noreferrer">demo on jsfiddle</a>.</p> <h3>Step 3</h3> <p>Now we have some Javascript running whenever the select menu is changed. Let's show and hide that text box!</p> <p>First, we need to make it hidden. Because we're showing and hiding it with Javascript, we should tell it to only hide when Javascript can run. Hiding things from people that can't run Javascript makes them grumpy. So, we'll add a new line to our onload handler:</p> <pre><code>$(function() { $('#text1').hide(); $('#select1'). // ... }); </code></pre> <p>If you guessed that new line is "ask jQuery to hide the text1 element," you guessed correctly!</p> <p>Now, how do we watch for "blue" options? Head back up to that jsfiddle and play with it. Did you notice that the <code>value</code> of the <code>option</code> is being alerted? Those aren't blue at all! We need to actually get to the <em>selected <code>option</code></em> instead of just the value. That's a bit funnier.</p> <p>Let's take a peek at <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/select" rel="nofollow noreferrer">MDN's documentation on <code>&lt;select&gt;</code></a>. It tells us that it's going to expose itself as a <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement" rel="nofollow noreferrer">HTMLSelectElement</a>. Not a big surprise. It has a property called <code>selectedIndex</code>, which tells us which <code>option</code> has been picked, and it has a property called <code>options</code>, which gives us direct access to the options themselves. Sweet!</p> <p>Let's update the onload again:</p> <pre><code>&lt;script type="text/javascript"&gt; $(function() { $('#text1').hide(); $('#select1').on('change', function(event) { var opt = this.options[ this.selectedIndex ]; alert('You picked ' + $(opt).text()); }); }); &lt;/script&gt; </code></pre> <p>Again, a <a href="http://jsfiddle.net/cQGmc/2/" rel="nofollow noreferrer">jsfiddle demo</a>.</p> <p><code>options</code> there is an array. Javascript, like PHP, uses square brackets to access array elements.</p> <p>So, we're picking our option, then wrapping it in jQuery then calling the <a href="http://api.jquery.com/text/" rel="nofollow noreferrer"><code>text</code> method</a> to get the <em>text node</em> inside the element, as opposed to the form value.</p> <p>Great, now we have a <em>string</em>. What can we do with it?</p> <h3>Step 4</h3> <p>Like PHP, Javascript has <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions" rel="nofollow noreferrer">regular expressions</a>, a way to do pattern matching. Hey, we have a pattern to match against!</p> <pre><code>&lt;script type="text/javascript"&gt; $(function() { $('#text1').hide(); $('#select1').on('change', function(event) { var opt = this.options[ this.selectedIndex ]; var picked_blue = $(opt).text().match(/blue/i); if(picked_blue) { alert('You picked a blue option!'); } else { alert('You did not pick a blue option.'); } }); }); &lt;/script&gt; </code></pre> <p>Again, a <a href="http://jsfiddle.net/Ku6sA/1/" rel="nofollow noreferrer">jsfiddle demo</a>.</p> <p>We're now using the <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match" rel="nofollow noreferrer"><code>match</code> method on the <code>String</code> object</a> to use a regex. In particular, a regex that looks for the characters <code>blue</code>, in a case-insensitive manner (the <code>i</code> at the end does that).</p> <p>This code should be detecting blue things now. Time to finally hide and show that text field!</p> <h3>Step 5</h3> <p>Let's dive right in.</p> <pre><code>$(function() { $('#text1').hide(); $('#select1').on('change', function(event) { var opt = this.options[ this.selectedIndex ]; var picked_blue = $(opt).text().match(/blue/i); if(picked_blue) { $('#text1').show(); } else { $('#text1').hide(); } }); }); </code></pre> <p>​</p> <p>Did you see it coming? Can you guess what it does?</p> <p>Here's the <a href="http://jsfiddle.net/Z6K4b/1/" rel="nofollow noreferrer">jsfiddle demo</a>.</p> <p>And here we are, mission accomplished. You can apply this same technique to all sorts of stuff.</p> <p>Pay attention to the links I've scattered throughout here, especially to jsfiddle, which is a <strong>great</strong> playground for Javascript and HTML, and to the MDN sites, which are a <em>great</em> Javascript and HTML reference. Oh, and to the jQuery manual. </p>
    singulars
    1. This table or related slice is empty.
    1. PODo action when item selected
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USCharles
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODo action when item selected
      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. VTAcceptedByOriginator
    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. VTUpMod
    1. COYou sir...are awesome :) Just 1 more thing...how can I display something else if they selected an option without prefix blue?
      singulars
      1. PO
      1. USSmiley
    2. COSure, it's just a matter of adding more branches in the `if` block, by adding `elseif`s.
      singulars
      1. PO
      1. USCharles
    3. COGreat, thanks for explaining :) Could you open a chat for 5minutes please?
      singulars
      1. PO
      1. USSmiley
 

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