Create a form and fill form details in below table in Javascript
Tags: javascript, webdev, html, css
Published: 2022-03-16 18:37:39

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
<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>
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54bl17fjaleat7c06lnc.png)
 

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

Thanks.

<hr style="border-width: 2px;border-color: #87CEEB;">
<h1> 💎 Love to see your response</h1>
<ol>
<li style="padding: 10px;font-size: 30px;"><b>Like</b> - You reached here means. I think, I deserve a like.  </li>
<li style="padding: 10px;font-size: 30px;"><b>Comment</b> - We can learn together. </li>
<li style="padding: 10px;font-size: 30px;"><b>Share</b> - Makes others also find this resource useful.</li>
<li style="padding: 10px;font-size: 30px;"><b>Subscribe / Follow</b> - to stay up to date with my daily articles. </li>
<li style="padding: 10px;font-size: 30px;"><b>Encourage me</b> - <a href="https://www.buymeacoffee.com/urstrulyvishwak" target="_blank">You can buy me a Coffee</a>
</ol>
<hr style="border-width: 2px;border-color: #87CEEB;">

<h2> Let's discuss further. </h2>

<ol style="padding: 20px;">
<li style="padding: 10px;font-size: 30px;">Just DM <br> <a href="https://twitter.com/messages/compose?recipient_id=1388837509824610314&text=Hello world"
class="twitter-dm-button" data-screen-name=“@urstrulyvishwak” data-size="large">@urstrulyvishwak</a>
</li>
<li style="padding: 10px;font-size: 30px;">
<p> Or mention <br> <a href="https://twitter.com/intent/tweet?screen_name=urstrulyvishwak&ref_src=twsrc^tfw" class="twitter-mention-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">@urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> </li>
</ol>

<h2> For further updates: </h2>
<a href="https://twitter.com/urstrulyvishwak?ref_src=twsrc^tfw" class="twitter-follow-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">Follow @urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>