asked on

Show/hide areas of web form

Hi,
I would like to show different areas on my form dependent on what is selected. I can do this is JavaScript but would like to use Jquery as the effects look much better.

I've seen lots of Jquery examples on the net but I cannot see how to implement it into my form.

Would it be possible to show me an example on my form and I will be able to do the rest.

<!DOCTYPE html>
<html lang="en">


<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Basic Form</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">


</head>
<body>


<div class="container">
    <div class="row">
      <div class="content-main col-md-12">
        <form>	
        <img src="img/logo.png">
        <br><br>
        Metsa Wood Quick Estimation tool
        <br><br>
<div class="col-md-9">	


 <fieldset class="form-group">
    <label for="exampleSelect1">Type of Construction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>Traditional Masonry</option>
      <option>Timber Frame</option>
      </select>
  </fieldset>


<!-- Below will only show if Timber Frame is selected -->
  
  <fieldset class="form-group">
    <label for="PartyWalls">Which walls are party walls?</label>
	   <br><input type="checkbox"> W1
	   <br><input type="checkbox"> W2
	   <br><input type="checkbox"> W3
	   <br><input type="checkbox"> W4
  </fieldset>
<!-- Above will only show if Timber Frame is selected -->



  <fieldset class="form-group">
    <label for="FloorWidthA">Floor Width A(X)</label>
    <input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
  
    <label for="FloorWidthB">Floor Width B(X)</label>
    <input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
   <!-- <small class="text-muted">This is the text for A</small>-->
  </fieldset>
  
    
  <fieldset class="form-group">
    <label for="FloorWidthA">Is there a stair Opening?</label>
  <br><input type="checkbox">
  </fieldset>

  
  <!-- Below will only show if Stair Opening is checked -->
   <fieldset class="form-group">
    <label for="FloorWidthA">Opening width C(X)</label>
    <input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
    <label for="FloorWidthA">Opening width D(X)</label>
    <input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
  </fieldset>
<!-- Above will only show if Stair Opening is checked -->

  
  
  
   <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

      <div class="col-md-3">
        <img src="img/drawing.jpg">
      </div>
    </div>
  </div>
</div>
  
  
  
  
  
  <!--
  
  <fieldset class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
  <div class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  
  
  -->
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

</body>

</html>

Open in new window

Tom Beck

Smash and grab some free jQuery coding here:

https://jsfiddle.net/f39588ot/

SmashAndGrab

ASKER

Hi tom,

Legend!

May I ask a silly question though? How does this fit togther?

where does the Jquery go in relation to the HTML?

Does in go a <script> tag in the header or in the body?

Also, I see there is a line of .css, does that go in the <style> tag?

sorry for the noob questions.

SmashAndGrab

ASKER

like this?

Tom Beck

The script block would need to go on the page after the jQuery library. In the code you posted with the question, the library is loaded at the bottom of the page. The script should go after that but before the closing </body> tag. Also, you need to wrap the event handlers in a jQuery document ready function so they can be registered properly. (jsFiddle does this automatically.)

$(document).ready(function(){
	$('#stairOpng').on('change', function() {
	  if ($(this).is(':checked')) {
		$('.stairs').slideDown();
	  } else {
		$('.stairs').slideUp();
	  }
	});
	
	$('#TypeOfConstruction').on('change', function() {
	  if ($(this).val() === "timber") {
		$('.walls').slideDown();
	  } else {
		$('.walls').slideUp();
	  }
	});
});

Open in new window

Yes, the css goes in the <style> block which should be in the <head>.

I cannot tell from your screen shot but don't forget to add the collapse, walls, and stairs classes to the field sets as I have done in the fiddle. Add the values to the <options> in the drop down list, and the stairOpng id to the checkbox.

SmashAndGrab

ASKER

Thanks Tom.

Having a bit of trouble pulling it all together.

So I've posted my page.

Once I've got this working and in the right place I'll be able to smash it myself.

<!DOCTYPE html>
<html lang="en">


<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Basic Form</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">


</head>
<body>


<div class="container">
    <div class="row">
      <div class="content-main col-md-12">
        <form>	
        <img src="img/logo.png">
        <br><br>
        Metsa Wood Quick Estimation tool
        <br><br>
<div class="col-md-9">	


 <fieldset class="form-group">
    <label for="exampleSelect1">Type of Construction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>Traditional Masonry</option>
      <option>Timber Frame</option>
      </select>
  </fieldset>


<!-- Below will only show if Timber Frame is selected -->
  
  <fieldset class="form-group">
    <label for="PartyWalls">Which walls are party walls?</label>
	   <br><input type="checkbox"> W1
	   <br><input type="checkbox"> W2
	   <br><input type="checkbox"> W3
	   <br><input type="checkbox"> W4
  </fieldset>
<!-- Above will only show if Timber Frame is selected -->



  <fieldset class="form-group">
    <label for="FloorWidthA">Floor Width A(X)</label>
    <input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
  
    <label for="FloorWidthB">Floor Width B(X)</label>
    <input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
   <!-- <small class="text-muted">This is the text for A</small>-->
  </fieldset>
  
    
  <fieldset class="form-group">
    <label for="FloorWidthA">Is there a stair Opening?</label>
  <br><input type="checkbox">
  </fieldset>

  
  <!-- Below will only show if Stair Opening is checked -->
   <fieldset class="form-group">
    <label for="OpeningWidthC">Opening width C(X)</label>
    <input type="text" class="form-control" id="OpeningWidthC" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
    <label for="OpeningWidthD">Opening width D(X)</label>
    <input type="text" class="form-control" id="OpeningWidthD" placeholder="Enter in mm">
  </fieldset>
<!-- Above will only show if Stair Opening is checked -->

  
 <fieldset class="form-group">
    <label for="exampleSelect1">Spanning direction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>Up/Down</option>
      <option>Left/Right</option>
      </select>
  </fieldset>


 <fieldset class="form-group">
    <label for="FloorWidthA">Does the building have more than 2 stories?</label>
  <br><input type="checkbox">
  </fieldset>

 <fieldset class="form-group">
    <label for="FloorWidthA">Is there a SVP within the floor zone?</label>
  <br><input type="checkbox">
</fieldset>

 <fieldset class="form-group">  
  
    <label for="exampleSelect1">Select delivery postcode:</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>SS</option>
      <option>SA</option>
      </select>
  </fieldset>

  
  
   <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

      <div class="col-md-3">
      
      
      
      <div style="position:relative;">
      <img src="img/drawing.jpg">
    <span id="DimensionA" style="position:absolute;top:10px; left:200px">
    <span id="DimensionB" style="position:absolute;top:100px; left:10px;transform: rotate(90deg); transform-origin: left top 0;">
</div>  
      
      
        
        
        
        <br><br>
      	<table style="width: 100%">
			<tr bgcolor="silver">
				<td>Floor depth in mm</td>
				<td>220</td>
				<td>240</td>
				<td>300</td>
			</tr>
			<tr>
				<td>Result?</td>
				<td>Result?</td>
				<td>Result?</td>
				<td>Result?</td>
			</tr>
		  </table>
        
        
        
      </div>
      
      
      
    </div>
  </div>
</div>
  
  
  
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

</body>

</html>

Open in new window

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SmashAndGrab

ASKER

Thanks Tom.

Almost there. For some reason its not toggling?

<!DOCTYPE html>
<html lang="en">


<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Basic Form</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

<style type="text/css">

.collapse {
  display: none
}
</style>


<script type="text/javascript">



</script>


</head>
<body>


<div class="container">
    <div class="row">
      <div class="content-main col-md-12">
        <form>	
        <img src="img/logo.png">
        <br><br>
        Metsa Wood Quick Estimation tool
        <br><br>
<div class="col-md-9">	


 <fieldset class="form-group">
    <label for="exampleSelect1">Type of Construction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>Traditional Masonry</option>
      <option>Timber Frame</option>
      </select>
  </fieldset>


<!-- Below will only show if Timber Frame is selected -->
  
  <fieldset class="form-group collapse walls">
    <label for="PartyWalls">Which walls are party walls?</label>
	   <br><input type="checkbox"> W1
	   <br><input type="checkbox"> W2
	   <br><input type="checkbox"> W3
	   <br><input type="checkbox"> W4
  </fieldset>
<!-- Above will only show if Timber Frame is selected -->



  <fieldset class="form-group">
    <label for="FloorWidthA">Floor Width A(X)</label>
    <input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
  
    <label for="FloorWidthB">Floor Width B(X)</label>
    <input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
   <!-- <small class="text-muted">This is the text for A</small>-->
  </fieldset>
  
    
  <fieldset class="form-group">
    <label for="FloorWidthA">Is there a stair Opening?</label>
  <br><input type="checkbox">
  </fieldset>

  
   <!-- Below will only show if Stair Opening is checked -->
   <fieldset class="form-group collapse stairs">
    <label for="OpeningWidthC">Opening width C(X)</label>
    <input type="text" class="form-control" id="OpeningWidthC" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
    <label for="OpeningWidthD">Opening width D(X)</label>
    <input type="text" class="form-control" id="OpeningWidthD" placeholder="Enter in mm">
  </fieldset>
<!-- Above will only show if Stair Opening is checked -->

  
 <fieldset class="form-group">
    <label for="exampleSelect1">Spanning direction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>Up/Down</option>
      <option>Left/Right</option>
      </select>
  </fieldset>


 <fieldset class="form-group">
    <label for="FloorWidthA">Does the building have more than 2 stories?</label>
  <br><input type="checkbox">
  </fieldset>

 <fieldset class="form-group">
    <label for="FloorWidthA">Is there a SVP within the floor zone?</label>
  <br><input type="checkbox">
</fieldset>

 <fieldset class="form-group">  
  
    <label for="exampleSelect1">Select delivery postcode:</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>SS</option>
      <option>SA</option>
      </select>
  </fieldset>

  
  
   <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

      <div class="col-md-3">
      
      
      
      <div style="position:relative;">
    
    <img src="img/drawing.jpg">
       <span id="DimensionA" style="position:absolute;top:3px; left:185px">
    A
    </span>
    <span id="DimensionB" style="position:absolute;top:212px; left:4px;transform: rotate(270deg); transform-origin: left top 0;">
    B
    </span>
</div>  
      
      
        
        
        
        <br><br>
      	<table style="width: 100%">
			<tr bgcolor="silver">
				<td>Floor depth in mm</td>
				<td>220</td>
				<td>240</td>
				<td>300</td>
			</tr>
			<tr>
				<td>Result?</td>
				<td>Result?</td>
				<td>Result?</td>
				<td>Result?</td>
			</tr>
		  </table>
        
        
        
      </div>
      
      
      
    </div>
  </div>
</div>
  
  
  
  
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>


<script>

$(document).ready(function(){
	$('#stairOpng').on('change', function() {
	  if ($(this).is(':checked')) {
		$('.stairs').slideDown();
	  } else {
		$('.stairs').slideUp();
	  }
	});
	
	$('#TypeOfConstruction').on('change', function() {
	  if ($(this).val() === "timber") {
		$('.walls').slideDown();
	  } else {
		$('.walls').slideUp();
	  }
	});
});
</script>



</body>

</html>

Open in new window

Tom Beck

I made some modifications to the markup in addition to the script at the bottom and <style> block at the top. You have not added the classes, option values, nor the id to the checkbox. You still need to correct the multiple instances of id="TypeOfConstruction".

SmashAndGrab

ASKER

That's great! It works.

Thank you so much for your help.

Tom Beck

You're welcome. Thanks for the points.