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 the col class name
this col element is contained within row and container element
bootstrap col classes can be extended with responsive elements
responsive breakpoints : lg (large screens) and md (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 the constructor 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 by waveClickEvent

for example, the event method for waveSubmit1element 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)

    }

}

Javascript Lizzard Js Series : build a basic mortgage calculator