Display different things based on variable

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
Xaos
Posts: 940
Joined: Wed Jan 11, 2012 4:01 am

Display different things based on variable

Post by Xaos »

So heres the issue. I have a drop down with 6 different variables. Depending on which the user selects, a different HTML form displays. I wanted to code this part in javascript, but I would be willing to learn the right jQuery function if it was the only way. I also don't want to refresh the page when the user selects said variable.
Top
User avatar
hallsofvallhalla
Site Admin
Posts: 12026
Joined: Wed Apr 22, 2009 11:29 pm

Re: Display different things based on variable

Post by hallsofvallhalla »

In Raw Javascript

Code: Select all

onchange="javascript:DisplayForm()"

Code: Select all

function DisplayForm()
{
 var Selected = document.getElementById('DropDown').value;
if (Selected == "GreenForm")
{
document.getElementById('FormDIv').innerHTML = "place form code here";
}
if (Selected == "RedForm")
{
document.getElementById('FormDIv').innerHTML = "place form code here";
}
if (Selected == "BlueForm")
{
document.getElementById('FormDIv').innerHTML = "place form code here";
}

}
Top
User avatar
Xaos
Posts: 940
Joined: Wed Jan 11, 2012 4:01 am

Re: Display different things based on variable

Post by Xaos »

hallsofvallhalla wrote:In Raw Javascript

Code: Select all

onchange="javascript:DisplayForm()"

Code: Select all

function DisplayForm()
{
 var Selected = document.getElementById('DropDown').value;
if (Selected == "GreenForm")
{
document.getElementById('FormDIv').innerHTML = "place form code here";
}
if (Selected == "RedForm")
{
document.getElementById('FormDIv').innerHTML = "place form code here";
}
if (Selected == "BlueForm")
{
document.getElementById('FormDIv').innerHTML = "place form code here";
}

}
Thanks, Halls !
Top
User avatar
Xaos
Posts: 940
Joined: Wed Jan 11, 2012 4:01 am

Re: Display different things based on variable

Post by Xaos »

So, what am I doing wrong here???

Code: Select all

<html>
<form action="sim.php" method="post">
<div id = "p1">
</br></br></br>
Climate<select name="climate"><option value="Tropical">Tropical</option><option value="Subtropical">Subtropical</option><option value="Polar">Polar</option><option value="Arid">Arid</option><option value ="Semiarid">SemiArid</option><option value="Temperate">Temperate</option></select> </br>                                                                                                                         </br></br>

<SCRIPT LANGUAGE="Javascript">

onchange="javascript:DisplayForm()";

function DisplayForm(){
var climate = document.getElementById('climate').value;
if(climate == "Temperate"){
document.getElementById('climate').innerHTML="
Predator Severity<select name="predators"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Chance of Natural Disaster<select name="disaster"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Food Supply<select name="food"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>        </br>      </br></br>
Risk of Deadly Disease<select name="disease"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>  </br>  </br></br>
Access to Water<select name="water"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
Primary Consumers<select name="primary"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
<input type="submit" name="submit value="Submit" />
</form>
";}




</SCRIPT>


<style type = "text/css">
#p1{
margin-top:150px;
margin-left:670px;
}
</style>

 </html>
Top
User avatar
hallsofvallhalla
Site Admin
Posts: 12026
Joined: Wed Apr 22, 2009 11:29 pm

Re: Display different things based on variable

Post by hallsofvallhalla »

Code: Select all

onchange="javascript:DisplayForm()";
is meant to be in your dropdown

Code: Select all

<select name="climate" onchange="javascript:DisplayForm()">
Top
User avatar
Xaos
Posts: 940
Joined: Wed Jan 11, 2012 4:01 am

Re: Display different things based on variable

Post by Xaos »

oh, woops


Gah. Prob making a stupid mistake. Still nothing when I go through the list.

Code: Select all

<html>
<form action="sim.php" method="post">
<div id = "p1">
</br></br></br>
Climate<select name="climate" onchange="javascript:DisplayForm()"><option value="Tropical">Tropical</option><option value="Subtropical">Subtropical</option><option value="Polar">Polar</option><option value="Arid">Arid</option><option value ="Semiarid">SemiArid</option><option value="Temperate">Temperate</option></select> </br>                                                                                                                         </br></br>

<script type = "text/javascript">

function DisplayForm(){
var climate = document.getElementById("climate").value;
if(climate == "Temperate"){
document.getElementById("climate").innerHTML="
Predator Severity<select name="predators"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Chance of Natural Disaster<select name="disaster"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Food Supply<select name="food"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>        </br>      </br></br>
Risk of Deadly Disease<select name="disease"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>  </br>  </br></br>
Access to Water<select name="water"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
Primary Consumers<select name="primary"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
<input type="submit" name="submit value="Submit" />
";

}if(climate == "Tropical"){
 document.getElementById("climate").innerHTML="
Predator Severity<select name="predators"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Chance of Natural Disaster<select name="disaster"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Food Supply<select name="food"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>        </br>      </br></br>
Risk of Deadly Disease<select name="disease"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>  </br>  </br></br>
Access to Water<select name="water"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
Primary Consumers<select name="primary"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
<input type="submit" name="submit value="Submit" />
";
}if(climate == "Subtropical"){
document.getElementById("climate").innerHTML="
Predator Severity<select name="predators"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Chance of Natural Disaster<select name="disaster"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Food Supply<select name="food"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>        </br>      </br></br>
Risk of Deadly Disease<select name="disease"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>  </br>  </br></br>
Access to Water<select name="water"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
Primary Consumers<select name="primary"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
<input type="submit" name="submit value="Submit" />
";
}if(climate == "Polar"){
document.getElementById("climate").innerHTML="
Predator Severity<select name="predators"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Chance of Natural Disaster<select name="disaster"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Food Supply<select name="food"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>        </br>      </br></br>
Risk of Deadly Disease<select name="disease"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>  </br>  </br></br>
Access to Water<select name="water"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
Primary Consumers<select name="primary"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
<input type="submit" name="submit value="Submit" />
";
}if(climate == "Arid"){
document.getElementById("climate").innerHTML="
Predator Severity<select name="predators"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Chance of Natural Disaster<select name="disaster"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Food Supply<select name="food"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>        </br>      </br></br>
Risk of Deadly Disease<select name="disease"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>  </br>  </br></br>
Access to Water<select name="water"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
Primary Consumers<select name="primary"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
<input type="submit" name="submit value="Submit" />
";
}if(climate == "Semiarid"){
document.getElementById("climate").innerHTML="
Predator Severity<select name="predators"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Chance of Natural Disaster<select name="disaster"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select></br></br></br>
Food Supply<select name="food"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>        </br>      </br></br>
Risk of Deadly Disease<select name="disease"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>  </br>  </br></br>
Access to Water<select name="water"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
Primary Consumers<select name="primary"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option><option value="7">Seven</option><option value="8">Eight</option><option value="9">Nine</option><option value="10">Ten</option></select>    </br> </br></br>
<input type="submit" name="submit value="Submit" />
";
}

 }



</script>


<style type = "text/css">
#p1{
margin-top:150px;
margin-left:670px;
}
</style>

 </html>

<?php
    if (isset($_POST['submit']) {
$predators = $_POST['predators'];
$disaster = $_POST['disaster'];
$climate = $_POST['climate'];
$food = $_POST['food'];
$disease = $_POST['disease'];
$water = $_POST['water'];
$primary = $_POST['primary'];

    }
?>
Top
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Display different things based on variable

Post by Jackolantern »

The "javascript:" part isn't required anymore is it?
The indelible lord of tl;dr
Top
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: Display different things based on variable

Post by Winawer »

Check your quotes.
Top
User avatar
hallsofvallhalla
Site Admin
Posts: 12026
Joined: Wed Apr 22, 2009 11:29 pm

Re: Display different things based on variable

Post by hallsofvallhalla »

it may not be, use alert() to see if the function is getting called.
Top
User avatar
Xaos
Posts: 940
Joined: Wed Jan 11, 2012 4:01 am

Re: Display different things based on variable

Post by Xaos »

Yeah I used alert and I took out the JS, and nothing happens. So I guess that means its not calling the JS right? Should I just put all of this in an external JS and call it, would that make a difference?
Top
Post Reply

Return to “Beginner Help and Support”