CODEWITHSUNDEEP
javascriptjquery
user982124
user982124

Reputation: 4610

Conditionally Show/Hide Table Row based on yes/no radio button

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.

Here's my html form with one yes/no question and one hidden row for more details if they click yes:

<form class="form-horizontal" action="#" method="post" id="questionForm">
      <input type="hidden" name="recid" value="1">

      <table class="table table-condensed table-hover table-bordered">

          <tr>
          <td><strong>Question 1</strong></td>
          <td>please answer yes or no to this question</td>
          <td>
              <div class="controls">
                  <label class="radio inline">
          <input type="radio" name="question1" id="question1" value="Yes" required>Yes        </label>
                  <label class="radio inline">
          <input type="radio" name="question1" id="question1" value="No" required>No          </label>
                  <label for="question1" class="error"></label>
        </div>
          </td>
          </tr>


          <tr class="question1yes">
          <td></td>
          <td>Please describe this and when it started</td>
          <td>
              <div class="controls">
          <textarea name="question1Details" rows="3"></textarea>
          <label for="question1Details" class="error"></label>
        </div>
          </td>
          </tr>

          </table>
</div>              
                    <div class="control-group">
            <div class="controls">
              <button type="submit" class="btn btn-primary">Continue</button>
              <button type="reset" class="btn">Reset</button>
            </div>
        </div>

      </form>

Here's my current script that isn't working:

$().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("");
                    }
                    });

        });

I've setup a jsFiddle here 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.

Upvotes: 0

Views: 7021

Answers (4)

usman allam
usman allam

Reputation: 284

try this following it working as it should be

$("input:radio[name=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("");
  }
});

the problem is you are calling $("#question1yes").show(); instead of $(".question1yes").show(). question1yes is class implemented on tr not id.

Hope it will help you

Upvotes: 0

kkarsko
kkarsko

Reputation: 103

Your radio inputs have identical IDs, and that is not valid HTML. Also, it is breaking your code, because you can't manipulate them independently.

My advice:

Append _y and _n (or whatever you prefer) to the IDs, respectively. (Or use any other unique ID)

Bind the click events to the new IDs.
Code:

$("#question1_y").click(function () {
    $(".question1yes").show();
});

$("#question1_n").click(function () {
    $(".question1yes").hide();
    $(".question1yes textarea").val("");
});

Upvotes: 0

L105
L105

Reputation: 5419

You can't have 2 elements with the same ID, to select them you can use $('.controls input[type="radio"]') or a class selector exemple $('.radio').

Upvotes: 2

Amit
Amit

Reputation: 15387

Try this

$().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).val() == "Yes"){
                    $("#question1yes").show();
                }else{
                    // hide the dependent fields and blank them
                    $(".question1yes").hide();
                    $("#question1Details").val("");
                }
                });

    });

Demo

Upvotes: 0

Related Questions