admin管理员组文章数量:1327711
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 one as 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=".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—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=".1.4/jquery.min.js"></script>
<script src=".0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
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 one as 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./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—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./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Share
Improve this question
asked Mar 17, 2016 at 10:28
The OneThe One
391 gold badge1 silver badge7 bronze badges
1
- Stack Overflow is not a code writing service. Show us what you've tried so far and we'll be happy to help. – Natalie Hedström Commented Mar 17, 2016 at 10:32
3 Answers
Reset to default 3First give id to the element which you want to show and hide.
- By default make it display none.
- According to the event(click, change..etc) make them show and hide.
<!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./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" id="tempId" style="display:none;">
<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" id="FLoorAId">
</fieldset>
<!-- Below will only show if Stair Opening is checked -->
<fieldset class="form-group" id="tempId2" style="display:none;">
<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—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./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" ></script>
<script>
$(document).on('change','#TypeOfConstruction',function() {
if($("#TypeOfConstruction option:selected").text()=='Timber Frame'){
$('#tempId').show();
}else{
$('#tempId').hide();
}
});
$(document).on('click','#FLoorAId',function() {
if($("#FLoorAId").is(':checked')){
$('#tempId2').show();
}else{
$('#tempId2').hide();
}
});
</script>
</body>
</html>
do like this.this will help to you
<!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>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<style type="text/css">
.wfiedls{
display: none;
}
</style>
</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 wfiedls">
<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>
<script type="text/javascript">
$(document).ready(function(){
$("#TypeOfConstruction").on('change',function(){
var selectedBalue = $("#TypeOfConstruction").val();
if (selectedBalue == "Timber Frame")
{
$(".wfiedls").slideDown(500);
}
else{
$(".wfiedls").slideUp(500);
}
});
});
</script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
try this. it will slideUp/slideDown depending on the option selected.
- List item
- added value to the select options.
- js code added at the end of the file.
- initially hiding the timer-frame-fieldset.
- if timer frame selected then slideDown the timer-frame-fieldset else slideUp.
hope it helps...
<!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./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 value="traditional-masonry">Traditional Masonry</option>
<option value="timber-frame">Timber Frame</option>
</select>
</fieldset>
<!-- Below will only show if Timber Frame is selected -->
<fieldset class="form-group" style="display:none;" id="timber-frame-fieldset">
<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>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#TypeOfConstruction").on("change", function(e){
var v = $(this).val();
if(v == 'timber-frame') {
$("#timber-frame-fieldset").slideDown();
} else {
$("#timber-frame-fieldset").slideUp();
}
});
});
</script>
</body>
</html>
本文标签: javascriptShowhide areas of form (im using bootstrap)Stack Overflow
版权声明:本文标题:javascript - Showhide areas of form (im using bootstrap) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742219103a2435112.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论