Text box to appear when a radio button is selected

Question

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

Souvaine

You can use Vue.js for that. It's very easy. See the docs right here... vuejs.org – Quern

Answer 1

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>

Mccauley

Great That has helped me. Thank you Abi :) – Souvaine

Answer 2

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>

Lowlife

I think this is the best option. Simple and no js. – Byway

Answer 3

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.

Irk

should I do it for all of the (".text") like ($".text")? – Souvaine

I have updated my comment and provided complete script. – Irk

@Abi, did you try above script? – Irk

Answer 4

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

Standifer

Answer 5

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/

Tetany

the address lines are appearing all the time and not showing when only yes is ticket? Thanks Abi – Souvaine

you will need to add class text with display none check that link jsfiddle.net/2w0zf887 – Tetany

Answer 6

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>

Osteopath