Question

I am a very early beginner who is trying to do something in JavaScript.

Basically I have an HTML form where I am collecting user input. I have a submit button. When on submit, I want my values from the input to be appended to a table as a new row.

I have spent hours trying to find a direction, can someone point me in the right direction?

Answer 1

Since nobody else wants to (or can) provide a pure JS answer, here’s how you can do it with pure JavaScript. If some things are unclear, let me know and I’ll be happy to provide you with useful links and explain what this code does:

HTML:

<table id='targetTbl'>
    <tbody>
        <tr><th>Name</th><th>First name</th></tr>
    </tbody>
</table>
<form id='inForm'>
    <input type='text' name='name' id='name'/>
    <input type='text' name='first' id='first'/>
    <input type='submit' value='add row'/>
</form>​

JavaScript:

document.getElementById('inForm').onsubmit = function(e)
{
    var newRow,i;
    e = e || window.event;
    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
    }
    e.returnValue = false;
    e.cancelBubble = true;
    newRow = '<tr>';
    for(i=0;i<this.elements.length;i++)
    {
        if (this.elements[i].tagName.toLowerCase() === 'input' && this.elements[i].type === 'text')
        {
            newRow += '<td>'+this.elements[i].value+'</td>';
        }
    }
    document.getElementById('targetTbl').innerHTML += newRow + '</tr>';
    return false;
};

In order for this to work, you need to either include this code at the bottom of your HTML file (not reccomended) to ensure the DOM has loaded before you’re trying to change things, or you’ll have to put this code inside an event handler:

window.onload = function()
{
    //above code goes here
};

Here’s a working fiddle