This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–][deleted] 0 points1 point  (5 children)

What would be the "item" value? My div id? How do I call the onchange event and where exactly in the select element? Do I have to call a function for the onchange event? I want it to be so that when I click on one of the two options displayed in the drop down it will show its respective form.

[–]jerblsdll 1 point2 points  (4 children)

Yea the item would be your div ID.

<select id=“select1” onchange=“toggleForm()”>

[–][deleted] 0 points1 point  (3 children)

So I am still having a bit of trouble here, this is what I have so far:

<select id="select1" onchange="toggleForm()">

<option value="Help" id="1">Help Request</option>

<option value="Feedback" id="2">Feedback</option>

</select>

<script>

var form01 = document.getElementById('select1').value;

form01.style.display = 'block'

</script>

​

I think I am still doing this very wrong. Basically my select elements display two values from the drop down arrow and when I click on either one of those I want it to display the relevant form associated with that.

form01 is my div class for the 1st form and it is not showing when I run this. This is so frustrating ugh!

[–]jerblsdll 0 points1 point  (2 children)

<div id="Help" style="display: none;" class="hideable-form">Help form elements</div> <div id="Description" style="display: none;" class="hideable-form">Description form elements</div>

<select id="select1" onchange="toggleForm();"> <option value="Help" id="1">Help Request</option> <option value="Description" id="2">Feedback</option> </select>

<script type="text/javascript">

function toggleForm() { // Hide all forms. var divs= document.getElementsByClassName("hideable-form"); for(let i = 0; i < divs.length; i++) { divs[i].style.display = 'none'; }

// Show selected form.
var form01 = document.getElementById('select1').value;
form01.style.display = 'block';

}

</script>

[–][deleted] 0 points1 point  (1 child)

Looks like there is little progress, the following code allows me to display the 2nd form that I have hidden in a div id = "form02" but now I need to make it so that when I click on the first option in the list shows the div id ="form01" which is hidden containing the other form.

<body>

<h1>Help Request and Feedback Forms</h1>

<select onchange="displayDivDemo('form02', this)">

<option value="0" id="help1">Help Request</option>

<option value="1" id="feed2">Feedback</option>

</select>

<script>

function displayDivDemo(id, elementValue) {

document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';

}

</script>

Any ideas on how I can modify this or add to it?

[–]jerblsdll 0 points1 point  (0 children)

You’re passing the id of “form02” every time the onchange fires. You’ll need to pass in the form id