CODEWITHSUNDEEP
javascripthtmlradio-button
Abi Houghton
Abi Houghton

Reputation: 111

Text box to appear when a radio button is selected

I want to get a text box to appear when a radio button is selected yes . This is what my code looks like; 

Care of Address? <br>
Yes<input type="radio" name="radio1" value="Yes" onClick="getResults(this)">
No<input type="radio" name="radio1" value="No" onclick="getResults(this)">

<div class="text"><p>Address Line 1  <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3  <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode  <input type="text" name="text5" id="text5" maxlength="30"></p></div>

<script> 
    (document).ready(function() {
        (".text").hide()

    });
    function getResults(elem) {
        elem.checked && elem.value == "Yes" ? (".text").show() : (".text").hide();
    };
    </script>

Can anyone help me

Abi

Upvotes: 7

Views: 22239

Answers (6)

YellowAfterlife
YellowAfterlife

Reputation: 3182

You don't even need JavaScript for this, let alone JQuery or Vue

#dvtext {
  display: none;
}
#chkYes:checked ~ #dvtext {
  display: block;
}
<input type="radio" id="chkYes" name="chk" />
<label for="chkYes">Yes</label>

<input type="radio" id="chkNo" name="chk" />
<label for="chkNo">No</label>

<div id="dvtext">
    Text Box:
    <input type="text" id="txtBox" />
</div>

Upvotes: 3

mesimplybj
mesimplybj

Reputation: 639

Here is fiddle for you https://jsfiddle.net/Simplybj/mjLwusut/4/

You can achieve this by binding your radio buttons with click event like this

$('#rdYes').on('click', function() {
  $(".text").show();
});

$('#rdNo').on('click', function() {
  $(".text").hide();
});

and here is your HTML for that. Its better to wrap input types with label tag. And also if you are going to hide element first then try hide on DOM rendering rather than after DOM is ready to prevent from flickering

Care of Address?
<br>
<label for="rdYes">Yes</label>

<input id="rdYes" type="radio" name="radio1" value="Yes" onClick="getResults(this)">
<label for="rdNo">No</label>
<input id="rdNo" type="radio" name="radio1" value="No" onclick="getResults(this)" checked="checked">
<div class="text" style="display:none;">
  <p>Address Line 1
    <input type="text" name="text1" id="text1" maxlength="30">
  </p>
</div>

Upvotes: 0

Monier Shokry
Monier Shokry

Reputation: 96

that's what you should do

div.text{display:none} Care of Address?

Yes No

<div class="text"><p>Address Line 1  <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3  <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode  <input type="text" name="text5" id="text5" maxlength="30"></p></div>

<script> 
    function getResults(elem) {

        elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
    };
    </script>

https://jsfiddle.net/2w0zf887/

Upvotes: 0

Rahul Tripathi
Rahul Tripathi

Reputation: 172378

Try this:

function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var dvtext = document.getElementById("dvtext");
        dvtext.style.display = chkYes.checked ? "block" : "none";
    }
<label for="chkYes">
    <input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />
    No
</label>
<div id="dvtext" style="display: none">
    Text Box:
    <input type="text" id="txtBox" />
</div>

Upvotes: 8

Nitin Garg
Nitin Garg

Reputation: 896

It seems that you missed to add $ before (document) as well as before (.text). Please add $ and see if it works or not. So your script would become like

<script> 
$(document).ready(function() {
    $(".text").hide();

});
function getResults(elem) {
    elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
};
</script>

Hope this helps.

Upvotes: 0

C.Schubert
C.Schubert

Reputation: 2064

The jquery

$('.no, .yes').click(function() {
   if($('.no').is(':checked')) {
     $('.adrs').hide();
    }
    if ($('.yes').is(':checked')){
         $('.adrs').show();
    }
});

I added the class yes to the yes radio button and no to the no radio button. Alos i added the class adrs to the text fields that are adresses. Then based on the classes im hiding the adresses or showing it

Codepen

Upvotes: 0

Related Questions