CODEWITHSUNDEEP
javascriptjqueryhtmlcoldfusionradio-button
Fai Zal Dong
Fai Zal Dong

Reputation: 246

Coldfusion - Validate If Radio Button is Checked

I have a problem with radio buttons. I have 2 radio buttons and on click I want each of radio buttons show and hide different text field.

Each radio button have its own id and name.

html code:

<td>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
     <input type="radio" id="has_sub_component_1" name="has_sub_component" value="1"/>Yes
    </label>
    <label class="btn btn-default">
     <input type="radio" id="has_sub_component_0" name="has_sub_component" value="0"/>No
    </label>
 </div>
</td>


<cfif isDefined("has_sub_component_1")>
  <tr>
    <td></td>
    <td><input type="text" name="mark" id="sub_mark" value="" />
  </tr>
</cfif>
<cfif isDefined("has_sub_component_0")>
  <tr>
    <td></td>
    <td><input type="text" name="topic" id="sub_topic" value="" />
  </tr>
</cfif>

When I clicked on one of the radio button it shows nothing. I know isDefined() function only accept name in input text field. How can I display textfield on click of the radio button?

Upvotes: 0

Views: 1252

Answers (1)

TRose
TRose

Reputation: 1738

This is definitely a problem with a solution that is JavaScript-based.

Here's an example:

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
    }
    else document.getElementById('ifYes').style.display = 'none';

}

</script>
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
    <div id="ifYes" style="display:none">
        If yes, explain: <input type='text' id='yes' name='yes'><br>
        What can we do to accommodate you?  <input type='text' id='acc' name='acc'>
    </div>

        other 3<input type='text' id='other3' name='other3'><br>
        other 4<input type='text' id='other4' name='other4'><br>

Grabbed from this jsfiddle:

http://jsfiddle.net/QAaHP/16/

You can use it to target any page element by a class or ID, then apply the affect.

Upvotes: 1

Related Questions