Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Paul Simmonds
4,538 PointsDynamic Forms using html and php?
Can you make forms that dynamically change when selecting a specific product?
For instance. Im making a website that is for lifts in your home. If a room is over say 3.5meters i want to display one lot of products. and if it is less that 2.5 meters i want to display a different product
5 Answers
shiv sandhu
Full Stack JavaScript Techdegree Student 9,979 PointsIn this case you have to use Javascript or its library jQuery.
For example -
<html>
<form>
<select id="car">
<option value="2500$">Car model 800</option>
<option value="2777$">Car model 900</option>
</select>
</form>
<p id="demo"><p>
</html>
In the above code user can select between 2 car models. if user select model 800 then value will be 2500$ else if user selects model 900 then value will be 2777$.
Now, you can use script tag to add Javascript in html.
<script>
document.getElementById("car").onchange = function() {
var price= document.getElementById("car").value;
document.getElementById("demo").innerHTML = "your model price will be " + price ;
};
</script>
The above code which was between script tags checks that if there is any change in element with id="car". if there will be any change ( Like somebody selects another option ) then value of price variable will be equal to value of "select" element. Now, suppose that user selects Model 900 then the value of price variable will be "2777$" and code will display that "your model price will be 2777$".
This is the simple example to just make understand what you can do. It is not related with the code that you need, if you are not familiar with javascript or jQuery then you must take javascript jQurey tutorial first.
Jorge Felico
15,543 PointsYes this is possible using JavaScript. Which is another type of programming language to use in conjunction with HTML
Paul Simmonds
4,538 Pointsis JavaScript what i will need if i wanted to have one select box. Once you have picked the item you want, i want to then show another select box that has more infomation to choose from.
Jorge Felico
15,543 PointsYes, As Shiv and I mentioned in our comments, it's best that you take a Javascript course so that you better understand how changing HTML elements can be done on the fly without the need to refresh the page. Here is a good introductory course: Treehouse Javascript Basics
Paul Simmonds
4,538 Pointsthank all i have started my Javascript course.
I not have another query. How do you add another 'select' menu using JS?
for instance.
IF the person clicks BMW I want a new select box to open with the models in there.
i usually do <? include ...?> but i have tried this and it does not work.
Heres what i have:-
<form>
<label for="liftType">Lift Type: </label>
<select name="liftType" id="liftType" onchange="getinfo()">
<option></option>
<option value="1">Straight</option>
<option value="2">Curved</option>
<option value="3">Straight Rail Config</option>
</select>
<noscript><input type="submit" value="Submit" onchange="getinfo()"></noscript>
</form>
<br><br>
<script>
function getinfo() {
var liftType = document.getElementById('liftType');
var liftSelect = liftType.options[liftType.selectedIndex].value;
if (liftSelect == 1) {
<? include ('stairliftmake.php')?>
}else {
console.log('not the best choice')
}
}
</script>