Hide HTML fields with Javascript

Description:

Hide or show different HTML fields when markup is changed.

Solution:

There are 3 aspects to take into consideration.

First, we have to identify which element will dictate the change. This is done by adding the property onchange or onclick and so on:

<select id=”age” name=”age” onchange=”javascript: hideFields(document.getElementById(‘age’).value)”>

 

Second, we need to identify which fields will suffer from the change. For this we simply add a distinctive id to them:

<div id=”to_hide”>content of div here</div>

 

Last, we have to create the Javascript function:

function hideFields(age){
    var element_to_hide = document.getElementById(“to_hide”);
    if (age>= 18) {
        element_to_hide.style.display = ”;
    } else {
        element_to_hide.style.display = ‘none’;
    }
}

 

The code above hides an element if age value is less than 18.

Advertisements

About admin

Just another php developer trying to give something back to the community.
This entry was posted in Script and tagged . Bookmark the permalink.

One Response to Hide HTML fields with Javascript

  1. Thank you for sharing your thoughts. I really
    appreciate your efforts and I will be waiting for your further post thanks once again.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s