CODEWITHSUNDEEP
javascriptjquerytoggleforms
adamdehaven
adamdehaven

Reputation: 5920

HTML Form Toggle Hide/Show fields based on selection

On my form (shown below) I have a set of radio options. If the user selects the last option for "Other", I want the div to show and slide down where they can enter a custom value in a text box. I also want to be able to have multiple instances of this same process multiple times in the same form (with different IDs obviously).

Here's how it's set up: If the user selects the radio button who's class is "color_toggle" and the value equals "Other", I want it to show the element id "specify_color_box". If they select a different radio button, I want that same element hidden.

Here's the answer just in case anyone else has the same issue. My form element is shown here: 

<fieldset class="w100">
       <div class="rowElem align-left">
      <input type="radio" id="Gray" name="color" value="Gray" class="color_toggle" checked >
           <label>Gray (Standard)</label>
        </div>
       <div class="rowElem align-left">
            <input type="radio" id="All Yellow" name="color" value="All Yellow" class="color_toggle">
            <label>All Yellow</label>
          </div>
       <div class="rowElem align-left">
        <input type="radio" id="Yellow Posts Black Panels" name="color" value="Yellow Posts Black Panels" class="color_toggle">
          <label>Yellow Posts / Black Panels</label>
         </div>
         <div class="rowElem align-left">
       <input type="radio" id="other_color" name="color" value="Other" class="color_toggle">
        <label>Other</label>
       </div>
       <div id="specify_color_box" class="form-subscr-field rowElem align-left" style="display:none;">
       <label for="specify_color" id="specify_color_label">Specify Custom Color: </label>
       <input id="specify_color" type="text" name="specify_color" class="inputbox" size="10" value="Enter custom color" onFocus="if(this.value=='Enter custom color') this.value='';" onBlur="if(this.value=='') this.value='Enter custom color';"/>
      </div>
</fieldset>

and my jQuery is shown here:

$(document).ready(function(){
    $("input[name='color']").click(function(){
    if($(this).val() == "Other") {
        $("#specify_color_box").slideDown("fast");
    }
    else{
        $("#specify_color_box").slideUp("fast");
    }
});
});

Upvotes: 1

Views: 4569

Answers (2)

adamdehaven
adamdehaven

Reputation: 5920

Here's the answer just in case anyone else has the same issue. My form element is shown here:

<fieldset class="w100">
       <div class="rowElem align-left">
      <input type="radio" id="Gray" name="color" value="Gray" class="color_toggle" checked >
           <label>Gray (Standard)</label>
        </div>
       <div class="rowElem align-left">
            <input type="radio" id="All Yellow" name="color" value="All Yellow" class="color_toggle">
            <label>All Yellow</label>
          </div>
       <div class="rowElem align-left">
        <input type="radio" id="Yellow Posts Black Panels" name="color" value="Yellow Posts Black Panels" class="color_toggle">
          <label>Yellow Posts / Black Panels</label>
         </div>
         <div class="rowElem align-left">
       <input type="radio" id="other_color" name="color" value="Other" class="color_toggle">
        <label>Other</label>
       </div>
       <div id="specify_color_box" class="form-subscr-field rowElem align-left" style="display:none;">
       <label for="specify_color" id="specify_color_label">Specify Custom Color: </label>
       <input id="specify_color" type="text" name="specify_color" class="inputbox" size="10" value="Enter custom color" onFocus="if(this.value=='Enter custom color') this.value='';" onBlur="if(this.value=='') this.value='Enter custom color';"/>
      </div>
</fieldset>

and my jQuery is shown here:

$(document).ready(function(){
    $("input[name='color']").click(function(){
    if($(this).val() == "Other") {
        $("#specify_color_box").slideDown("fast");
    }
    else{
        $("#specify_color_box").slideUp("fast");
    }
});
});

Upvotes: 0

Didier Ghys
Didier Ghys

Reputation: 30666

You can check for the checked state of your radio button like this:

$('#Other').is(':checked')

This way, you don't even have to rely on the value of the radio button - which you could decide to change for whatever reason - just its state.

Note: if your element has an ID, use it to select it, it's the fastest method. The more complex the selector, the slower the selection !

Applied to your code, it gives the following (inverting the slideUp/slideDown to match the condition correctly):

$(document).ready(function() {
    $("#specify_color_box").css("display", "none");
    $(".color_toggle").click(function() {
        if ($('#other_color').is(':checked')) {
            $("#specify_color_box").slideDown("fast");
        } else {
            $("#specify_color_box").slideUp("fast");
        }
    });
});​

DEMO

Upvotes: 1

Related Questions