How to make a DIV appear only if a form selection is made?

JavaScript
1

Hello,

How does one make a DIV visible if a form action is taken, such as a Radio button selected?

But here is the thing: this DIV that is to become visible and invisible upon radio clicked does not contain a simple short Text message, but instead this DIV contains many Images for selection. I mean I know how to turn on/off a DIV via Javascript command:

document.getElementById("action_label").innerHTML= "something here";

but again this DIV is to contain many images and the inputs for selecting one of these images so that Javascript command will just not cut it.

Looking forward to your suggestion.

2

Put the div with content in as if it is to be displayed.

Give it an ID, e.g. ShowOnSelection, so it would look like:

<div id="ShowOnSelection"> ... </div>

In your CSS:

#ShowOnSelection{
    display: none;
}

In your JavaScript, to trigger it showing or hiding on a button clicking etc:

function TriggerShowOnSelectionElement(){
    var possible = "noneblock";
    var element = document.getElementByID('ShowOnSelection');
    element.style.display = possible.replace(element.style.display, '');
}

Fire that onclick and bob’s your uncle :slight_smile:

3 

<form id="personalInfo">
    <input type="radio" name="sex" value="male"> Male
    <input type="radio" name="sex" value="female"> Female
</form>
<div id="neeDeclaration">We cannot accept your nee name right now, but rest assured that we're working on it.</div>

Each radio button should have an onclick event attached to it, that shows or hides the div section.


.hidden {
    display: none;
}

Ensure that you load the script from just before the </body> tag.


var form = document.getElementById('personalInfo');
var neeDeclaration = document.getElementById('neeDeclaration');
form.elements.sex[0] = function () {
    neeDeclaration.className = 'hidden';
};
form.elements.sex[1] = function () {
    neeDeclaration.className = '';
};

If you need to cater for multiple class names, you can use this good set of hasClass, addClass and removeClass functions instead.

4

Hi,

I have done what you have written below but it is displaying the DIV that
contains the elements that should be hidden until the user clicks on a
form button that indicates they want to see them.

That is I added to the Web page:

<div id = “hiddensection”>
… all bunch of HTML code here…
</div>

and then in the CSS that this web page loaded I added:

#div hiddensection {
display: none;
}

But it is displaying the HTML code that is inside the <div id = “hiddensection”>

What is the problem?

Regards,

5

You will also want to add some code that hides the section.


document.getElementById('hiddensection').style.display = 'none';

Although, I must stress that in terms of technique for the overall solution that you’re using, that directly manipulating element styles is less preferable than adjusting the class name of the element.

6

Go with what PMW57 says, he knows more about JavaScript than I do!

However, as to your current issue, note that your problem is:

#div hiddensection {
 	display: none;
 }

That is incorrect CSS - #div looks for an element with the ID div.

Fix:

#hiddensection {
 	display: none;
 }
7

@Jake - I have no trouble with him using your solution, as long as it remains clear that non-scripting users won’t be able to use the form. If they are to be catered for as well, there are good solutions that include them too.

8

Hi,

Thanks for the suggestions.

At the end I ended up using ideas from few here.
That is I used:

<div style=“display: <?php if (isset($background_image) AND !empty($background_image)) {echo ‘block’;} else {echo ‘none’;} ?>;” id=“background_mages”>

to control whether the DIV was displaying or not and then used
onclick via Javascript to display it or not by referring to the ID of the DIV.

Regards,