In this tutorial, we will learn how to copy values from a form, into a html table dynamically.

Objective : Given a form with a Username, age and radio button representing sex, and we copy this values into an html table.

Code:

<!DOCTYPE html>
<html>
    <head>
        <script src="mootools-core-1.4.5-full-compat.js"></script>
        <script src="mootools-more-1.4.0.1.js"></script>
        <script>
                    window.addEvent('domready', function(){
                        $('addButton').addEvent('click',function(event){
                           // Get all the values from the fields
                          var jsObj= $('myForm').toQueryString().parseQueryString();
                          var tr= new Element('tr');
                          tr.adopt([new Element('td', { text: jsObj.uname}),new Element('td', { text: jsObj.age}),new Element('td', { text: jsObj.sex})])
                          var last=$('target').getElements('tr').getLast();
                          var som=tr.inject(last,'after');
                            if(last.getChildren().length==1){
                                last.dispose();
                            }
                            $('myForm').reset();

                        });
                });
            </script>
    </head>
    <body>
        <div style="width:500px;margin:0 auto;" >
        <div style="float:right">
            <table id="target" border="1px" >

                    <tr>
                        <th>User name</th>
                        <th>Age</th>
                        <th>sex</th>
                     </tr>
                    <tr>
                        <td colspan="3">No Users added, Please add a user</td>
                    </tr>

            </table>
        </div>
        <div style="float:left">
            <form id="myForm">
                User Name<input type="text" id="uname" name="uname" /><br/>
                Age <input type="text" id="age" name="age" /><br/>
                <input type="radio" name="sex" value="Male" checked /> Male
                <input type="radio" name="sex" value="Female" />Female<br/>
                <input type="button" id="addButton" value="Add User" />
            </form>
        </div>
    </body>
</html>

Explanation:Table with id target,   is the table with header Username,age and sex, as you can also see there is a row which reads "No Users added, Please add a user". We will have to remove this row , with values from the form with id "myForm" from the respective fields to be filled in the table cells.

In Line 8, we attach the click event in the addButton, when clicked the values will be copied, Then we use the toQueryString() method which essentially stringyfy the form data , like so "uname=asdf&age=12&sex=Male", but parseQueryString method will parse the string and make it an javascript object. We then created a tr element which we intent to inject into the table, with three td child elements.Each td will now hold the username,age and sex. Once constructed we then inject it to the table , but offcourse we need to inject as the last row, and remove the "No Users added, Please add a user" row, which we check in the if block. And at last , we reset the form using reset().

Demo:

 

User name Age sex
No Users added, Please add a user
User Name
Age
Male Female