DEV Community


Posted on


what i learned last week: create a dynamic form using javascript

The first step in creating a dynamic form starts on the server side of your program. In my case, I created a Single Page Application with a Rails backend and a Postgres database.

Note: I'm currently a student at Flatiron Bootcamp and we initially dived into the SQLite database before learning about Postgres. If you are like me and have issues setting up your backend database checkout the video below:

Learn PostgreSQL Tutorial - Full Course for Beginners

Once you have you have your backend all set up and you've tested out your models, controllers and routes it's time to head over to the front end repository.

Create a Repository

Tip: It's common practice to have two separate repositories for the backend and frontend of full stack programs

Appointment Program:

Github Frontend
Github Backend

Next, add an index.html and index.js file to the directory in your local machine via the terminal.

touch index.html
touch index.js

In the newly created index.html file create a form and separate elements that we will use later in this article.

        <button id="home-bttn" href="#header">Home</button>
        <button id="toggleForm" Onclick="toggleForm()">Schedule an Appointment</button>
        <button id="stylist-bttn" Onclick="showHairdresser()">Stylists</button>
        <button id="about-bttn" href="">About</button>
Enter fullscreen mode Exit fullscreen mode
 <div class="form-container">
            <form id="create-appointment-form">
                <h3>Schedule an Appointment</h3>
                <input id="first-name" type="text" values="" placeholder="First Name"> 
                <input id="last-name" type="text" values="" placeholder="Last Name"> 
                <input id="email" type="text" values="" placeholder="Email"> z
                <p>Choose a Stylist </p>
                <select id="hairdressers" name="hairdressers">
                  <option value="1">Elsa</option>
                  <option value="2">Lucy</option>
                  <option value="3">Margarita</option>
                  <option value="4">Sia</option>
                <p> Salon Menu </p>
                <select id="services" name="services">
                  <option value="1">Haircut</option>
                  <option value="2">Styling</option>
                  <option value="3">Color</option>
                  <option value="4">Waxing</option>
                  <option value="5">Perm</option>
                  <option value="6">Other</option>
                <input type="datetime-local" id="datetime" name="datetime" value="">
                <input id='create-button' type="submit" name="submit" value="Schedule" class="submit" onClick="hideForm()">

        <div id="appointment-container">
Enter fullscreen mode Exit fullscreen mode

In the newly created index.js file I confirmed that the DOM was loaded. The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

document.addEventListener("DOMContentLoaded", () => {
console.log("DOM Content Loaded")

Note: I used a callback function in the Event listener. A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Alright, now that we have the front end set up and confirmed that the DOM is loaded lets start making our form dynamic! following the DOM event listener I created a function that uses the querySelector method. This method selects the form using its id attribute - "form#create-appointment-form". This function will toggle the view of the form you created.

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!