Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

(Adaptive) forms for quick quote?

Discussion in 'Website Design Forum:' started by Bleek, Aug 22, 2012.

  1. Bleek

    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!
     
  2. Squiddy

    Squiddy Guest

    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 :)
     
  3. Bleek

    Bleek Junior Member

    Should I now be admitting I've never used jquery that isn't a cut and paste job? :)
     
  4. Squiddy

    Squiddy Guest

    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>
    
    
     
  5. Bleek

    Bleek Junior Member

    Brilliant!

    That's a massive help and just what I needed, thank you very much. :D
     
  6. Squiddy

    Squiddy Guest

    No problem! Let me know how you get on and if you need further help :)
     
    Bleek likes this.

Share This Page