Create your first responsive dynamic web form
in this tutorial you will learn how to build a simple loan application that displays mortgage cost
- Level : beginner
- Duration : 30 minutes
What you will learn
- search bootsnip to find a good code sample, and run it locally
- create a html page with bootstrap and jquery
- display form on left colum
- display calculation result on right column
- use javascript validation
the range form field
https://css-tricks.com/value-bubbles-for-range-inputs/
https://mdbootstrap.com/docs/standard/forms/range/
Build your own form
Create your first bootstrap page
Following the Bootstrap 5 introduction lesson, we start making a HTML 5 blank page to which we add
- the specific BS5 style sheet and javascript CDN reference :
- a title
- you can view it here , it is for now very simple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blank HTML 5 Bootstrap 5 Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Layout : bring in Two columns
Boostrap column layout allows management of various screen sizes : on small screens elements are arranged vertically, while on big screens they would be arranged horizontally
In order to build our dynamic configurator, we will use two columns :
- on desktop and tablets
- left column displays the form
- right column displays the result
- on small devices (smartphones), columns switch to row
- first row displays the form
- second column displays the result
We will use the bootstrap grid system to build those 2 columns in responsive mode.
Bootstrap columns
in this example we have many class elements to discover
- Bootstrap columns defined via
div
elements with thecol
class name - this
col
element is contained withinrow
andcontainer
element - bootstrap
col
classes can be extended with responsive elements - responsive breakpoints :
lg
(large screens) andmd
(medium screens) - the number specifies width in portion of 12 : 4/12 means a third
- we use the boostrap
order-md-last
class name to move the result column right on big screens, left on small screens
<div class="container">
<div class="row">
<div class="col-md-5 col-lg-4 order-md-last">
</div>
<div class="col-md-7 col-lg-8">
</div>
</div></div>
Form Layout : 3 columns
Then we will integrate form fields within a new row
element , which will itself contain 3 col
elements, we have three fields here so we will use col-4
class name, with additionnal md
suffix to specify that this 4/12 size starts at medium screen size. Smaller screens will display full width
** Integrating form in bootstrap colums**
paste the code below in the last column of your page layout (above : line 9)
<hr class="my-4">
<h4 class="mb-3">Payment</h4>
<form name="loan" method="get" action="test.php">
<div class="row gy-3">
<div class="col-md-4">
<label for="cc-name" class="form-label">Total Loan Amount</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
</div>
<div class="col-md-4">
<label for="cc-number" class="form-label">Loan Term in years</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
</div>
<div class="col-md-4">
<label for="cc-expiration" class="form-label">Interest Rate per year</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
</div>
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" type="submit" id="waveSubmit1">Calculate loan</button>
</form>
Jquery : add event on submit button
You remember the lesson from Javascript Objects : remember we had setup this event on the submit
button ?
** Well, let's go ahead and do a wee job on that babe **
the idea is to simplify the writing of events in the context of an application that has a lot of event driven elements.
- To appreciate the advantage of this technique, let's first have a look at line 3 here : you can see that a single line declares and event on the submit button with ID
waveSumbit1
. - The
waveEventHandler
method is our generic code to adress the specific event method for every event decalred in theconstructor
method : is build a method name from the id of the element - in our specific case of the
waveSubmit1
button, or in any other element that has an event declared in the constructor, we'll build a mtehod name base on the id prefixed bywaveClickEvent
for example, the event method for waveSubmit1
element will be… waveClickEventwaveSubmit1
class WaveJsLizzardEvents {
constructor() {
this.waveEventHandler("#waveSubmit1")
console.log("new class definition")
}
waveEventHandler(elt)
{
var that = this;
var fnName=elt.replace("#","");
console.log('Declaring waveClickEvent' + fnName + " for elt " + elt)
$(elt).on('click', eval("this.waveClickEvent" +fnName ));
}
waveClickEventwaveSubmit1(event,obj) {
console.log( "waveClickEventwaveSubmit1 : " + waveGlobals.hauteurFinale)
}
}
Calculate
Links
- https://bootsnipp.com/snippets/6vEM
- calculate formulas : https://www.thebalance.com/loan-payment-calculations-315564
- nice font : https://www.bankrate.com/calculators/mortgages/loan-calculator.aspx
- nice piechart graphic : https://www.calculator.net/loan-calculator.html