We Keep Coding

Input field filled with value green correct sign appears but form not submitted

I want to submit form but form submit button does not work,
Please Guide me. I want to submit my form using javascript. Form validation is working fine but I am unable to submit my form. I am new user. If any one help me to submit this form.
I have a code:
});
<link href="https://jqueryvalidation.org/files/demo/site-demos.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="page-content">
<div class="form-v4-content">
<form class="form-detail" action="abc.html" method="post" id="myform">
<h2>REGISTER FORM</h2>
<div class="form-group">
<div class="form-row form-row-1">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" class="input-text">
</div>
<div class="form-row form-row-1">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name" class="input-text">
</div>
</div>
<div class="form-row">
<label for="your_email">Your Email</label>
<input type="text" name="your_email" id="your_email" class="input-text" required pattern="[^#]+#[^#]+.[a-zA-Z]{2,6}">
</div>
<div class="form-group">
<div class="form-row form-row-1 ">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="input-text" required>
</div>
<div class="form-row form-row-1">
<label for="comfirm-password">Comfirm Password</label>
<input type="password" name="comfirm_password" id="comfirm_password" class="input-text" required>
</div>
</div>
<div class="form-checkbox">
<label class="container"><p>I agree to the Terms and Conditions</p>
<input type="checkbox" name="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="form-row-last">
<input type="submit" name="register" class="register" value="Register">
</div>
</form>
</div>
</div>
I just want to submit my form. I don't know what is the problem

The form doesn't submit because you told it not to.
jQuery.validator.setDefaults({
debug: true,
From the docs:
debug (default: false)
Type: Boolean
Enables debug mode. If true, the form is not submitted...

How to submit values of a php form and a javascript pop up?

I have created a PHP page which have some form information and at the end of the form i have a submit button. I know how to take all the user inputs from the form using the PHP post method. My problem is the following, how can i create a mini pop up form which will pop up after the user clicks the submit button. The pop up form will ask from the user if the submission of the information is urgent or not, the user will just choose between urgent or not urgent and click a button in the mini pop up form("proceed") that will close the pop up and send all information of the user inputs along with the pop up in a different PHP page. Can someone please guide with this problem?
The source code of my form at the moment is the following
<?php include "includes/tasksheader.php"; ?>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main1">
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Social Ensuarance Number</label>
<input type="text" class="form-control" id="" placeholder="Ensuarance Number">
</div>
<div class="form-group">
<label for="exampleInputEmail">Land Regisrty Department</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
</div>
<div class="form-group">
<label for="telephone">Income Tax Office</label>
<input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
</div>
<div class="form-group">
<label for="telephone">Court</label>
<input type="tel" class="form-control" id="telephone" placeholder="Court">
</div>
<div class="form-group">
<label for="telephone">Limassol District Administration</label>
<input type="tel" class="form-control" id="telephone" placeholder="District Administration">
</div>
<div class="form-group">
<label for="telephone">Municipality</label>
<input type="tel" class="form-control" id="telephone" placeholder="Municipality">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputUsername">VAT Department</label>
<input type="text" class="form-control" id="" placeholder="VAT">
</div>
<div class="form-group">
<label for="exampleInputEmail">RCB Bank</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
</div>
<div class="form-group">
<label for="telephone">Hellenic Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
</div>
<div class="form-group">
<label for="telephone">Bank of Cyprus</label>
<input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
</div>
<div class="form-group">
<label for="telephone">CDB Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
</div>
<div class="form-group">
<label for="telephone">Other</label>
<input type="tel" class="form-control" id="telephone" placeholder="Other">
</div>
</div>
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
<div>
<button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
Thanks in regards

I'm guessing you'll need to do the following:
first create the popup form(having two buttons...) then you'll need to write the following in your javascript file:
$('form').on("submit", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
or
$('button').on("click", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
then in your popup you'll again need to preventDefault and do whatever is on your intention.
I hope it helps:)

You could change the button to a submit button and set an onsubmit for the form:
<button type="submit">
<form method="post" onsubmit="openPopup();return false">
And then use javascript to open the popup with all the data you need.
I hope this helps.

How to make submit button work and showing the results in another page with only using javascript?

<!DOCTYPE html>
<html>
<head>
<title>Sign-up form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<form class="center" action="submit.htm" method="post">
<h2>Enter information here</h2>
<div class="form-item">
<label class="category" for="firstname">First name</label>
<input type="text" name="firstname" id="firstname">
</div>
<div class="form-item">
<label class="category" for="lastname">Last name</label>
<input type="text" name="lastname" id="lastname">
</div>
<div class="form-item">
<label class="category" for="meal">With Meal?</label>
<input type="radio" name="meal" value="no" id="no" checked>
<label class="value" for="no">NO</label>
<input type="radio" name="meal" value="yes" id="yes">
<label class="value" for="yes">YES</label>
</div>
<div class="form-item">
<label class="category" for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="form-item">
<label class="category" for="number">Contact number</label>
<input type="number" name="number" id="number">
</div>
<button type="submit">Submit</button>
</form>
</main>
</body>
</html>
I want to show the output of whatever the user input in a different page after clicking submit. how can i do this without using php and only javascript? JS is very hard for me to nderstand so pls help :(

If you use POST method you have to use any server side language like PHP. If you want to achieve the same thing in JavaScript it is very easy. Change the method to get.
<form class="center" action="submit.htm" method="get">
You can write your submit.htm like this.
<div id='firstname'></div>
<div id='lastname'></div>
<div id='meal'></div>
<div id='email'></div>
<div id='number'></div>
Your JavaScript code goes here.
var data = getJsonFromUrl();
document.getElementById("firstname").innerHTML = data['firstname'];
document.getElementById("lastname").innerHTML = data['lastname'];
document.getElementById("meal").innerHTML = data['meal'];
document.getElementById("email").innerHTML = data['email'];
document.getElementById("number").innerHTML = data['number'];
function getJsonFromUrl() {
var query = location.search.substr(1);
var result = {};
query.split("&").forEach(function(part) {
var item = part.split("=");
result[item[0]] = decodeURIComponent(item[1]);
});
return result;
}

jQuery HTML 5 require field if radio button checked

I have a form that has some radio buttons which I need some fields to be required if a radio button is checked.
I have the HTML5 required attribute on the radio button group which works fine but I want some text fields to be required if the corresponding radio button is checked.
I have written some JS which seems to have no effect, and doesn't seem to add the required attribute when the radio button is checked.
HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.js JS file:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('#stallType-Business').change(function () {
if(this.checked) {
$('#bizName').attr('required');
} else {
$('#bizName').removeAttr('required');
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});

You can do it like this, where you disable all inputs and then only activate the one that is selected.
It requires that you have the "disabled" prop added to all child inputs at the start.
I also added the ID's for the c-rail inputs.
Note that the check you do does not trigger when you select another radio button, that is why should disable the others when a new one is selected.
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
It is the disableAll() function that does the trick here.
function disableAll() {
$('#c-rail-yes').attr('required', false).attr('disabled', true);
$('#c-rail-no').attr('required', false).attr('disabled', true);
$('#craftName').attr('required', false).attr('disabled', true);
$('#bizName').attr('required', false).attr('disabled', true);
}
$('#stallType-Preloved').change(function () {
if(this.checked) {
disableAll();
$('#c-rail-yes').attr('required', true).attr('disabled', false);
$('#c-rail-no').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Craft').change(function () {
if(this.checked) {
disableAll();
$('#craftName').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
$('#bizName').attr('required', true).attr('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="bookingForm">
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input id="c-rail-yes" type="radio" name="c-rail" value="Yes" disabled /> Yes
<input id="c-rail-no" type="radio" name="c-rail" value="No" disabled /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" disabled />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" disabled />
</div>
</div>
</div>
</form>

Take a look at JQuery's .prop() method...
.prop()
...and a look at this example from...
How to require fields if a certain radio button is checked?
<body>
<form action="" method="post">
<label for="required_later">Required if Option2 selected</label>
<input type="text" name="text_input_field" id="required_later" disabled><br>
<input type="radio" id="option1" name="radio_options" value="option1">
<label for="option1">Option1</label><br>
<input type="radio" id="option2" name="radio_options" value="option2">
<label for="option2">Option2</label><br>
<input type="submit" name="submit" value="Submit">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#option1").click(function() {
$("#required_later").prop("required", false);
$("#required_later").prop("disabled", true);
});
$("#option2").click(function() {
$("#required_later").prop("required", true);
$("#required_later").prop("disabled", false);
$("#required_later").focus();
});
</script>
</body>

Another way to do it is using this function:
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
and adding class="input-radio" to those input that you want to do the job.
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Preloved" value="Preloved" />
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" class="input-radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>

Show/hide areas of form (im using bootstrap)

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.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—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>​

First 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.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" 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.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" ></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.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<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">
.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.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>​

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.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 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.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(){
$("#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>​