JavaScript hide element function

Question

I have a form where the user can select a generic auto-population based on checking a radio button. When the user checks the auto-populate radio button, the fields are auto populated with the data and then the fields become disabled.

In this first part of the function, I pass the auto-filled data:

            $('#myOptions').click(function()
            $('#value1').val("Auto-filled data");
            $('#Value2').val("Auto-filled data");                
            $('#Value3').val("Auto-filled data");

In this second part, I am disabling the html inputs

            // now i am disabling the html inputs:
            $('#Value4').prop("disabled", true);
            $('#Value5').prop("disabled", true);                
            $('#value6').prop("disabled", true);

Suppose I have another field with an ID of "Value7" in the form, that I would like to hide from the user interface as part of this function.

How can I hide the "Value7" input upon function triggering? I appreciate the help, I am very new to JavaScript, though I find it very exciting!

Actually i don't understand what you trying to explain – Just code Dec 21 '13 at 08:30 — Just code, Dec 21 '13 at 08:30

score 4 · Accepted Answer · edited May 23 '17 at 11:50

4

Using jquery:

To hide

jQuery('#Value7').hide() or jQuery('#Value7').css("display","none")

To show the element back

jQuery('#Value7').show() or jQuery('#Value7').css("display","block")

or pure js:

javascript hide/show element

edited May 23 '17 at 11:50

Community

1
1

answered Dec 21 '13 at 08:40

Héctor William

756
6
24

Awesome, I like how JQuery simplifies it so that I can just call the .hide() method. Thanks a lot. – user2917239 Dec 21 '13 at 08:45

score 1 · Answer 2 · answered Dec 21 '13 at 08:46

Try this javascript:

if you want disable:

document.getElementById('#Value7').setAttribute("disabled","disabled");

if you want enable:

document.getElementById('#Value7').removeAttribute('disabled');

if you want to hide :

document.getElementById('#Value7').css("display","none");

if you want to show:

document.getElementById('#Value7').css("display","block");

score 1 · Answer 3 · answered Dec 21 '13 at 08:47

1

I am not getting what are you trying to ask actualy . Let me know if this helps -

$("Value7").hide()

answered Dec 21 '13 at 08:47

Vikram

309
3
6
19

JavaScript hide element function

3 Answers3