[Solved] How to create a javascript function that will remember the user input and then display summary

by


This is a simple task, basically we need a button that when we click it outputs form elements inside some output element, I will use a div. To get elements in JavaScript we can assign id‘s to elements and do this: document.getElementById("elementIdName") to retrieve those values. From there we can use onclick which will activate when we click an element, value is to retrieve input values, and innerHTML to assign HTML to some element. Here is a simple example of getting a single input element, we called name. And outputting: Your name is 'nameHere':

For storing all out input we use an array, each time we submit our data we want to push() our current values input our global array. I will call this allNames for the example.

HTML

<label>Enter Name:</label><input type="text" id="name" />
<button id="submit">Submit</button>
<button id="showAll">Show All</button>
<div id="output"></div>

JavaScript

var allNames = [];

document.getElementById("submit").onclick = function()
{
    var name = document.getElementById("name").value;
    document.getElementById("output").innerHTML = "Your name is "+name;
    allNames.push(name);    
}

document.getElementById("showAll").onclick = function()
{
    var names = "Names: ";
    for(name in allNames) names += allNames[name] + ", ";
    document.getElementById("output").innerHTML = names;
}

Here is an example fiddle: http://jsfiddle.net/ghbAQ/1/

10

solved How to create a javascript function that will remember the user input and then display summary