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.

<nav>
        <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>
</nav>

 <div class="form-container">
            <form id="create-appointment-form">
                <h3>Schedule an Appointment</h3>
                <input id="first-name" type="text" values="" placeholder="First Name"> 
                <br><br>
                <input id="last-name" type="text" values="" placeholder="Last Name"> 
                <br><br>
                <input id="email" type="text" values="" placeholder="Email"> z
                <br><br>
                <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>
                </select>
                <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>
                </select>
                <br><br>
                <input type="datetime-local" id="datetime" name="datetime" value="">
                <br><br>
                <input id='create-button' type="submit" name="submit" value="Schedule" class="submit" onClick="hideForm()">
            </form>
        </div>

        <div id="appointment-container">
        </div>

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.