CODEWITHSUNDEEP
javascripthtmlforms
Swaraj Chhatre
Swaraj Chhatre

Reputation: 667

Populating the form bases on a dropdown box

I am building a tool which on a selection of a value from a dropdown box populates the other fields.So if suppose (a) is selected fileds 2 3 and 4 are displayed in a form but if(b) is selected fields 2 3 4 as well as additional fields 5 and 6 are added as well.Right now I am working around a way to have two forms one with fields 2 3 and 4 and other with 2 3 4 5 and 6.Depending on selection of values from dropdown list(a or b) either forms are shown/hidden.

But it doesn't do as expected.

The html is 

<html>
<head>
<title>My Page</title>
</head>
<body>
<center><h1>URL Builder</h1></center>
<div align="center">
<select id ="Type1" name="Aoldropdown">

<option value="Fixed">Fixed Ad Units</option>
<option value="Scrolled">Scrolled Ad Units</option>
<option value="Custom">Custom Ad Units</option>
</select>
<form name="Aolform" id ="aol1" action="/URLBuilder/URLRetriever" method="GET">

<select name="Sizedropdown">
<option value="300x1050">300x1050</option>
<option value="300x600">300x600</option>
<option value="300x250">300x250</option>
<option value="728x90">728x90</option>
<option value="970x250">970x250</option>
<option value="320x50">320x50</option>
<option value="768x90">768x90</option>
<option value="1024x90">1024x90</option>

</select>

<br></br>
  Base URL:<input type="text" name="baseURL"><br>
  Title Number:<input type="text" name="titleNo"><br>
  Placement ID: <input type="text" name="placementId"><br>
  Flight ID: <input type="text" name="flightId"><br>
  <input type="submit" value="Retrieve URL">
<!-- input type = "submit" Value ="Select URL Type"-->
</div>
</form>
<form name="Aolform2" id ="aol2" action="/URLBuilder/URLRetriever" method="GET">

<select name="Sizedropdown">
<option value="300x1050">300x1050</option>
<option value="300x600">300x600</option>
<option value="300x250">300x250</option>
<option value="728x90">728x90</option>
<option value="970x250">970x250</option>
<option value="320x50">320x50</option>
<option value="768x90">768x90</option>
<option value="1024x90">1024x90</option>

</select>

<br></br>
  Placement ID: <input type="text" name="placementId"><br>
  Flight ID: <input type="text" name="flightId"><br>
  <input type="submit" value="Retrieve URL">
<!-- input type = "submit" Value ="Select URL Type"-->
</div>
</form>
<script type ="text/javascript">
var forms = document.forms['Aolform'];
//console.log(forms);
//console.log(forms.elements);
document.getElementById("Type1").addEventListener("onchange",onDropDownChange,true);

if(document.getElementById("Type1").value =='Custom'){ 

    document.getElementById('aol1').style.visiblity='visible';
    document.getElementById('aol2').style.visibility='hidden';


        }
    else
        {
        document.getElementById('aol2').style.visibility='visible';
        document.getElementById('aol1').style.visibility='hidden';

        }

</script>
</body>
</html>

Please help me fix this. IS THERE ANY OTHER WAY I CAN DO IT.

Thanks Swaraj

Upvotes: 0

Views: 252

Answers (2)

Goose
Goose

Reputation: 3279

Check out this fiddle. I made a few changes, first instead of onchange just use change. Also you are referencing a non-existent function onDropDownChange(), so I have put your condition inside of that:

function onDropDownChange() {
    if (document.getElementById("Type1").value == 'Custom') {
        document.getElementById('aol1').style.display = 'none';
        document.getElementById('aol2').style.display = 'block';
    } else {
        document.getElementById('aol2').style.display = 'none';
        document.getElementById('aol1').style.display = 'block';
    }
}

I also changed the function to use style.display instead of style.visibility so that you don't have a gap above the second form when it displays.

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16841

Yes, there are lots of ways to do what you want, but I'm going to give you a straight answer based on what you have done so far. Your script is incorrect because the conditional is not triggered by the event OnChange. Try it like this:

document.getElementById("Type1").onchange = function() {
    if(document.getElementById("Type1").value =='Custom'){ 
        document.getElementById('aol1').style.visiblity='visible';
        document.getElementById('aol2').style.visibility='hidden';
    }
    else
    {
        document.getElementById('aol2').style.visibility='visible';
        document.getElementById('aol1').style.visibility='hidden';
    }
}

But you should check the behaviour of your "if" condition to see if that's what you really want to do.

Upvotes: 0

Related Questions