DEV Community

Cover image for Create a form and fill form details in below table in Javascript
Kurapati Mahesh
Kurapati Mahesh

Posted on • Edited on

22 3

Create a form and fill form details in below table in Javascript

Seems simple task right?. Correct. Basic JS DOM interaction, HTML & CSS knowledge is enough to achieve this.

This task can be an interview question for you. It's not that searching around different tutorials or stackoverflow or something else quickly. It's the step by step process we can build to achieve this.

As we regularly follow, first divide the big item into chunks.

Steps:

  • create a sample form with several fields with submit button. I added 'name & email' fields.
  • create a table column headers to show upfront. Which shows matching the labels of above form.
  • Enter values and perform interaction upon clicking on submit button.
  • Sample error message can be shown when user submits without values.

Here is the code:

Basically, it is self explanatory.



<html>
<script>
    function publishToTable() {
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const error = document.getElementById('error');
        error.innerHTML = (!name || !email) ? 'Name & Email both values are required.' : '';
        if (name && email) {
            const tableElement = document.getElementById('table');
            const trElement = document.createElement('tr');
            const tbodyElement = document.createElement('tbody');
            const nameEle = document.createElement('td');
            const emailEle = document.createElement('td');
            nameEle.innerHTML = name;
            emailEle.innerHTML = email;
            trElement.appendChild(nameEle);
            trElement.appendChild(emailEle);
            tbodyElement.appendChild(trElement);
            tableElement.appendChild(tbodyElement);
        }
    }
</script>

<body>
    <style>
        div.complete {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10%;
            overflow: auto;
        }

        div.form {
            height: 200px;
        }

        label {
            margin: 20px;
            display: block;
            font-size: 32px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
        }

        input {
            padding: 10px;
        }

        span {
            color: red;
            position: fixed;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        button {
            padding: 10px;
            margin-top: 40px;
            left: 50%;
            position: fixed;
            transform: translate(-50%, -50%);
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
        }

        div#tables {
            height: 300px;
            overflow: auto;
        }

        table,
        th,
        td {
            border: 1px solid red;
            border-collapse: collapse;
            font-size: 32px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
            padding: 10px;
        }

        th {
            width: 20%;
        }
    </style>
    <div class="complete">
        <div class="form">
            <label>Name: <input id="name" type="text"></label>
            <label>Email: <input id="email" type="text"></label>
            <span id="error"></span>
            <button onclick="publishToTable()">Submit</button>
        </div>
        <div id="tables">
            <table id="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</body>

</html>


Enter fullscreen mode Exit fullscreen mode

I will explain what is happening under publishToTable().

  • capture name and email values. (You can add more form fields if you require).
  • Checking for non-empty values and showing error in case if at least one value is empty using span.
  • Adding value to table only when both values are present. Hence checking both values and then forming td elements.
  • Then, creating table elements using javascript and assigning 'name and email' to td.

Thatz all. Here is the result.

Image description

Please let me know if you don't understand any piece.

Thanks.


💎 Love to see your response

  1. Like - You reached here means. I think, I deserve a like.
  2. Comment - We can learn together.
  3. Share - Makes others also find this resource useful.
  4. Subscribe / Follow - to stay up to date with my daily articles.
  5. Encourage me - You can buy me a Coffee

Let's discuss further.

  1. Just DM @urstrulyvishwak
  2. Or mention
    @urstrulyvishwak

For further updates:

Follow @urstrulyvishwak

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (1)

Collapse
 
genetakovic profile image
Eyüp Mert Şahin

Thanks!, it helped me a lot

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay