How to hide radio button until something happens?

Question

So I want to hide a radio button until my form is filled out but I don't know how. I tried .hide(); and that worked when I put it outside of my .submit function but doesn't work inside of it. This is using jquery and bootstrap.

Here is a small version of the JS I have ('agree' is the radio button):

$('myForm').submit(function(e){
    var firstName = $('first-name').val();
    var pattern = /^$/;
    var error = '';
    var checkbox = document.getElementById('agree');

    if(pattern.test(firstName)){
       error += 'Error: enter first name.\n';
    }

    if(error.length != 0){
        alert(error);
        e.preventDefault();
    }

});

I want to hide the radio button until the first name part of the form is filled out then the radio button will appear.

Set radio button's CSS to `display:none`. Then use jQuery's bind on input for the form field. When they start typing in it then set the radio button's css to `display:block;` See the following links to see other examples I have done on that: http://stackoverflow.com/questions/33551833/javascript-call-function-oninput/33553683#33553683 and http://stackoverflow.com/questions/33544127/check-if-the-page-was-reload — Shannon Duncan, Nov 05 '15 at 21:20
This seems like something you could use angular for pretty easily. — maxshuty, Nov 05 '15 at 21:21
Thank you, but I actually don't want to use css for this. I guess I should have mentioned I am using jquery and bootstrap. — Guy, Nov 05 '15 at 21:25
CSS is the simple way to hide an object, either with `display:none` or `visibility:hidden`. I believe jQuery has a function hide() for this... — Hasse Björk, Nov 05 '15 at 21:26

Hasse Björk · Answer 1 · 2015-11-05T21:28:45.383

0

I would use plain JavaScript for this:

<input type="text" name="first-name" value="" onchange="document.getElementById('agree').style.display = (this.value == '' ? 'block' : 'none' );"/>
<input type="checkbox" name="agree" value="Agree" style="display:none"/>

Edit: Other ways to do this is to use onkeydown, onkeyup or onblur instead of onchange

edited Nov 05 '15 at 21:28

answered Nov 05 '15 at 21:21

Hasse Björk

1,431
13
19

score 0 · Answer 2 · answered Nov 05 '15 at 21:28

Put an id in your radio like this :

<input type="radio" id="rad" />

Then hide it like this using jquery :

$('#rad').hide();

Then an example of how you can make it show when something happens would go a bit like this :

If ($('#something') > 10) {
    $('#rad').show();
}

Hope this helped :)

Shannon Duncan · Answer 3 · 2015-11-05T21:33:44.110

Here is a simple example using jquery... http://jsfiddle.net/wa8rxj43/2/

HTML

 <input type="text" id="name" class="name">
 <input class="not-display" id="somecheck" type="checkbox" name="vehicle" value="Car" checked>

JavaScript

$('#somecheck').hide();

$("#name").bind({
    'input':function(){
        if(this.value.length > 0)
        {
            $('#somecheck').show();
        }
        else
        {
            $('#somecheck').hide();
        }

    }
});

Edit: Removed CSS per OP's request.

How to hide radio button until something happens?

3 Answers3