Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript how to dynamically hide or reveal tables rows as needed Reply To: how to dynamically hide or reveal tables rows as needed

#169429
Stuart Bennett
Participant

Hi there

I have a Contact Us Form on my website which can be found at http://www.admiralsystems.co.uk/Contact%20Us.html

I need to hide or show certain fields in the form as needed.

I have a codepen for this at http://codepen.io/stuartbennett/pen/kzwey

I have asked many people for help with this already and the help I have received so far is partially working but not entirely resolving the issue.

So I am going to break this down very simply.

Theres a dropdown field on my form with an id of “ourServices” which has the following options

General Enquiry
Website Design Enquiry
Website Hosting Enquiry
Network Implementation Enquiry
Computer Crash Enquiry
Hardware Upgrade Enquiry
Software Upgrade enquiry
Mobile App Development Enquiry
Web App Development Enquiry
Bespoke Epos Enquiry
SEO Enquiry
Other

now for the moment Website Design Enquiry, Website Hosting Enquiry & Mobile App Development Enquiry have custom questions relevant to their subject that need to pop up only if there subject is selected.

So by default the DIV’s website, hosting & whichplatform must be hidden by default then if Website Design Enquiry is selected the div website should appear and hosting and whichplatform remain hidden if Website Hosting Enquiry is selected then both the website div and the hosting div need to appear but whichplatform div remain hidden if Mobile App Development Enquiry is selected then the whichplatform div should appear and website div and hosting div remain hidden.

if any other value on the subject field is selected then website, hosting and whichplatform should be hidden.

all HTML files are in the root of the site, CSS files are in the CSS folder, JavaScript files are in the JS folder and the PHP files for the forms submission processing are in the PHP folder.

in this case the files we need to work with are contact Us.html, Contact Us.css & Contact Us.js

the glitch i am having is in the Contact Us.js file from what i can tell so if you could please look through the exact scenario as stated above then go through my codepen code and tell me what i need to put in my js file to make this function as described above that would be really appreciated.

Sorry about the long post but hopefully being this detailed and specific will help get the issue resolved more quickly.