Databases
StackOverflow2013
Postsdbo
POConditionally Show/Hide Table Row based on yes/no radio button
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConditionally Show/Hide Table Row based on yes/no radio button
    primarykey
    data
    text
    <p>I have a simple html form with a series of questions in a table. If a user answers yes to a yes/no radio button question I then want to show a hidden row that allows them to enter details into a textarea field. If they click No the textarea input should be cleared and hidden again.</p> <p>Here's my html form with one yes/no question and one hidden row for more details if they click yes:</p> <pre><code>&lt;form class="form-horizontal" action="#" method="post" id="questionForm"&gt; &lt;input type="hidden" name="recid" value="1"&gt; &lt;table class="table table-condensed table-hover table-bordered"&gt; &lt;tr&gt; &lt;td&gt;&lt;strong&gt;Question 1&lt;/strong&gt;&lt;/td&gt; &lt;td&gt;please answer yes or no to this question&lt;/td&gt; &lt;td&gt; &lt;div class="controls"&gt; &lt;label class="radio inline"&gt; &lt;input type="radio" name="question1" id="question1" value="Yes" required&gt;Yes &lt;/label&gt; &lt;label class="radio inline"&gt; &lt;input type="radio" name="question1" id="question1" value="No" required&gt;No &lt;/label&gt; &lt;label for="question1" class="error"&gt;&lt;/label&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="question1yes"&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;Please describe this and when it started&lt;/td&gt; &lt;td&gt; &lt;div class="controls"&gt; &lt;textarea name="question1Details" rows="3"&gt;&lt;/textarea&gt; &lt;label for="question1Details" class="error"&gt;&lt;/label&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;div class="controls"&gt; &lt;button type="submit" class="btn btn-primary"&gt;Continue&lt;/button&gt; &lt;button type="reset" class="btn"&gt;Reset&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>Here's my current script that isn't working:</p> <pre><code>$().ready(function() { // validate the form when it is submitted $("#questionForm").validate(); if($("#question1:checked").length != 0){ // yes is checked... show the dependent fields $(".question1yes").show(); }else{ // hide it and blank the fields, just in case they have something in them $(".question1yes").hide(); $("#question1Details").val(""); } $("#question1").click(function(){ // show the dependent fields if(this.value == "Yes"){ $("#question1yes").show(); }else{ // hide the dependent fields and blank them $(".question1yes").hide(); $("#question1Details").val(""); } }); }); </code></pre> <p>I've setup a jsFiddle <a href="http://jsfiddle.net/fmdataweb/eHHTv/1/" rel="nofollow">here</a> that demonstrates my form as it currently stands. My optional row is starting as hidden but is not becoming visible when you click the yes radio button.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USuser982124
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COFor starters: You have two elements with the same id value which is not allowed. (id="question1"). Actually that is why it isn't working for you
      singulars
      1. POConditionally Show/Hide Table Row based on yes/no radio button
      1. USDrew
    2. COI've answered this question so many times in just 4 months I've joined the site, that I can't even bother anymore. People should search before posting.
      singulars
      1. POConditionally Show/Hide Table Row based on yes/no radio button
      1. USmelancia
 

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