Indie-Resource.com

Were Back!
http://indie-resource.com/forums/

Display different things based on variable

http://indie-resource.com/forums/viewtopic.php?t=6923

Page 1 of 1

Display different things based on variable

Posted: Wed Aug 21, 2013 8:14 pm
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.

Re: Display different things based on variable

Posted: Wed Aug 21, 2013 8:29 pm
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";
}

}

Re: Display different things based on variable

Posted: Wed Aug 21, 2013 8:40 pm
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 !

Re: Display different things based on variable

Posted: Wed Aug 21, 2013 9:09 pm
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>

Re: Display different things based on variable

Posted: Wed Aug 21, 2013 9:20 pm
by hallsofvallhalla

Code: Select all

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

Code: Select all

<select name="climate" onchange="javascript:DisplayForm()">

Re: Display different things based on variable

Posted: Wed Aug 21, 2013 9:23 pm
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'];

    }
?>

Re: Display different things based on variable

Posted: Thu Aug 22, 2013 5:00 am
by Jackolantern
The "javascript:" part isn't required anymore is it?

Re: Display different things based on variable

Posted: Thu Aug 22, 2013 5:45 am
by Winawer
Check your quotes.

Re: Display different things based on variable

Posted: Thu Aug 22, 2013 2:01 pm
by hallsofvallhalla
it may not be, use alert() to see if the function is getting called.

Re: Display different things based on variable

Posted: Thu Aug 22, 2013 8:25 pm
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?
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited