(Adaptive) forms for quick quote?

Bleek

Junior Member
Hi guys, first post (after my intro) and it's more than likely a very simple one for php knowledgeable folk. I don't know any php at all, just html!

What I'm trying to do is a create a php form with dropdowns that the website visitor submits.

However, the thing I need to do is change the price range based on a certain dropdown selection.

So for example:

First dropdown > option 1 or option 2

If option 1

The second dropdown displays price ranges> 100/200/300/500

Or if option 2 is selected in first dropdown display price ranges > 500/1000/1500

Does that make sense?

Any guidance would be much appreciated!
 
Unfortunately I don't know PHP so I can't be of much help in that department, however, have you tried looking for jQuery solutions? You will probably find exactly what you need which has documentation in place to explain how to modify it to make it what you need. The great thing about it is that most of them are editable through HTML/CSS so you don't need to learn the more difficult languages :)
 
I believe I have a solution for you, you can see it working in all its glory here: http://ladesigns.co.uk/form_test.html (You can also get the formatted version of the code here too)

Throw this into your head section:

Code:
<script type="text/javascript"><!--

var hiddenDivs = new Array();



window.onload = function() {

	//gets the all hidden divs so we can reset them all to hidden when we choose a new one

	var myDivs = document.getElementsByTagName("DIV");

	for (i=0; i<myDivs.length; i++) {

		if (myDivs[i].className == "content") {

			//hide them as we enter them into the array - if JS is on - they're hidden, and if JS is off we still see al of them

			myDivs[i].className = "hiddenContent";

			hiddenDivs.push(myDivs[i]);

		}

	}

}		



function show(divName) {

	//removes the space, as you can't have a div with a space in it

	divName = divName.replace(/ /g,"");

	//hides all the divs

	for (i=0; i<hiddenDivs.length; i++) {

		hiddenDivs[i].className = "hiddenContent";

	}

	//if the div exists - shows the selected div

	if (divName != "" && document.getElementById(divName)) {

		document.getElementById(divName).className = "content";

	}

	

}

//--></script>

		<style type="text/css"><!--

.hiddenContent {

	display: none;

	border: 1px grey solid;

	background-color: whitesmoke;

}



.content {

	display: block;

	border: 1px grey solid;

	background-color: whitesmoke;

	padding: 1em

}

//-->		</style>


Then throw this into your body:

Code:
<div>Choose your content</div>

		<form action="submit.php" method="get">

			<p><select name="content" onchange="show(this.value);">

				<option value="">Choose One...</option>

				<option value="Option1">Option 1</option>

				<option value="Option2">Option 2</option>

			</select></p>

		</form>

		<div id="Option1" class="content">

		

			<form>

				<p><select name="content">

				<option value="">Choose One...</option>

				<option value="Option1">£5</option>

				<option value="Option2">£10</option>

				<option value="Option1">£15</option>

				<option value="Option2">£20</option>

			</select></p>

			</form>

		

		</div>

		

		<div id="Option2" class="content">

		

					<form>

				<p><select name="content">

				<option value="">Choose One...</option>

				<option value="Option1">£50</option>

				<option value="Option2">£100</option>

				<option value="Option1">£150</option>

				<option value="Option2">£200</option>

			</select></p>

			</form>

		</div>
 
No problem! Let me know how you get on and if you need further help :)
 
Back
Top