Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>------<strong>EDIT</strong>------</p> <p>Please see fiddle for working code: <a href="http://jsfiddle.net/q7qGs/embedded/result/" rel="nofollow">http://jsfiddle.net/q7qGs/embedded/result/</a></p> <p>------<strong>//EDIT</strong>------</p> <p>Its a good idea to give your select an id and/or name attribute, with which you can easily target the field's selected option value value or text in a <strong>onchange</strong> or <strong>onclick</strong> function (callback) either in raw javascript or jquery. You could wrap each element or groups of elements in divs in the same way too.</p> <p>Personally, I would use jQuery to do this since its quicker to write and pretty well cross-browser compatible but, I digress...</p> <p>Essentially, in jQuery, if you have an select field defined like:</p> <pre><code>&lt;select id="is_owner"&gt; &lt;option value="yes"&gt;owner&lt;/option&gt; &lt;option value="no"&gt;non-owner&lt;/option&gt; &lt;/select&gt; </code></pre> <p>you could detect a change in it's value by adding something like:</p> <pre><code>&lt;script type="text/javascript"&gt; (function($){ $('#is_owner').change(function(){ //set var = to the field's current value var value = $(this).val(); // Check value to see which field to show/hide if(value == 'yes'){ // Show other field /* YOUR CODE TO SHOW OTHER FIELD GOES HERE... target the field you want to show or hide for the yes condition as before and append .show() or .hide() respecively*/ } else if(value == 'no'){ // Show other field /* YOUR CODE TO SHOW OTHER FIELD GOES HERE... (see above*/ } }); })(jQuery); &lt;/script&gt; </code></pre> <p>For more information about jQuery and how to use it please see <a href="http://jquery.com/" rel="nofollow">jQuery Website</a> in addition to a <a href="http://www.j-cook.net/index.php/forum/jquery/4481-show-hide-fields-in-front-end-form?limitstart=0&amp;start=15#4484" rel="nofollow">forum post/tutorial</a> on conditionally displaying/hiding form elements based on the value of another.</p> <p>Hope it helps,</p> <p>Gez</p>
    singulars
    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.
    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