Append row from user input with JavaScript

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

Answer 2

Few points to consider:

• You do not want your submit button to work. That means you do not want it to take you to the action you specified in the form element. So you either add an onclick event which (<input type="submit" onclick="dosomething();return false;" />) returns false, or you make it of type "button" (<input type="button" onclick="dosomething();" />).

• You need to define a function that should be called when the button is pressed:

Example:

function dosomething() {
    alert("I did something");
    // do something useful
}

• You need to create a <table> tag, and add rows to it based on your data. You could use jQuery for that, and I would recommend that to get you starting quickly. DOM manipulation in javascript is a pain. You know what, forget jQuery. Check @Elias's answer for a better, cleaner, faster approach. And also, it teaches you much more. It might be a valuable asset when/if you do use a library, and it certainly will, if you can do without one.

Example (in jQuery):

var table = $("<table></table>");
for (var i=0; i<data.length; i++) {
    var tr = $("<tr></tr>");
    var td = $("<td></td>");
    $(td).text(data[i]);
    $(tr).append(td);
    $(table).append(tr);
}
$("body").append(table);

Answer 3

Ok Guys, After reading some more and asking a friend to explain, i was able to do this with jQuery. I am sorry I didnt add jQuery tag at the beginning, because I didn't know. But I was exposed to jQuery from the very first exercise in js. So I was able to grasp this eventually. So this is what I have and it works for me. If this is right, might be useful for a learner like me.

The ids of my input fields are "firstname" and "lastname". getElementById().value gets the value input by the user.

var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value; 
$("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>" );

And I am calling this function through button onclick(). Thank you for the support.

Answer 4

You have two choices:

Classical: You submit the form. The server reads the form, and generates the HTML for a new copy of the form with the new row added and sends it back to the browser.

Ajax: You submit the form in the background using AJAX, then using JavaScript, you append a new row to the HTML client-side.

Which you choose depends on your comfort level with back-end vs. front-end coding.

Answer 5

You can use this function. You need to send as a parameter the id of the table and change valueInputForm with the variables in which you have the values of the inputs

function addRow(tableID) {      

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    cell1.innerHTML = valueInputForm;

    var cell2 = row.insertCell(1);
    cell2.innerHTML = valueInputForm;

    var cell3 = row.insertCell(2);
    cell2.innerHTML = valueInputForm;
}

Answer 6

Lets say you have this html HTML:

<form id="target">
  form-field1: <input type="text" id="form-field1" value="Hello there" />
  form-field2: <input type="text" id="form-field2" value="How are you" />
  <input type="submit" value="Go" />
</form>
<div id='targettable'><table><thead></thead><tbody></tbody></table></div>

You can use jquery:

$("#target :input").each(function(){
 var input = $(this); // This is the jquery object of the input, do what you will
  $("#targettable >tbody:last').append($(this).val());
})

Add jquery script to your code in <head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>