Storing user input in javascript array and displaying it

Question

I have to use javascript and jquery to take user input from a form and save it into a log which can then be called by the user.

My thinking was to achieve this by first storing the user input in an array. I've been able to do this successfully with 1 input but I'm having no luck with multiple inputs.

var d = new Date();
var arr = [];

var arr = document.getElementById("conductivity").value;
document.getElementById("demoX").innerHTML = arr;


function myX() {
    arr.push(d + conductivity.value);
    document.getElementById("demoX").innerHTML = arr;

How do I go about storing multiple fields? (say conductivity + voltage + blah)

EDIT: I originally said I wanted it returned as a string. To clarify, I want to display something along these lines in a new page: 19/04/2016 Conductivity: 42, Voltage: 11, Blah: 0

arr.push({date: d, conductivity: conductivity.value, voltage: voltage.value}); — Arun P Johny
– Arun P Johny, Commented Apr 19, 2016 at 13:11
Mutating the multiple values in a string is not very idomatic. Unless there's a particular assignment that you're doing which requires you to slice up a string for practice. — Seth
– Seth, Commented Apr 19, 2016 at 13:25
You could save it as a string e.g. conductivity;voltage;blah then on the other side you can convert the string to an array again. — Black
– Black, Commented Apr 19, 2016 at 13:28

Mark Schultheiss · Accepted Answer · 2016-04-19 15:28:43Z

You can create an object (avoids global variables except it) then store stuff in it including the functions you need (namespaced) to use!

Here you can try it out: https://jsfiddle.net/MarkSchultheiss/bacy1r18/1/

Sample markup:

Cond:
<input id="conductivity" value="100" /> Blah
<input id="blah" value="bluesblah"> Volt
<input id="voltage" value="100" /> Date
<input id="mydate" type="date" />
<button id="save" type="button">
  save
</button>
<button id="show" type="button">
  show
</button>
<div id="demoX">
</div>

Code:

var myThings = myThings || {}
myThings.values = {
  outputs: [],
  labels: {
    d: "",
    c: "Conductivity",
    v: "Voltage",
    b: "Blah"
  },
  defaultDate: new Date()
};
myThings.library = {
  formatdate: function(mydate) {
    var d = new Date(mydate);
    var day = d.getDate();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    return day + '/' + month + '/' + year;
  },
  saveEm: function() {
    var cond = document.getElementById("conductivity").value;
    var volt = document.getElementById("voltage").value;
    var blah = document.getElementById("blah").value;
    // default to now date
    var d = document.getElementById("mydate").value ? document.getElementById("mydate").value : myThings.values.defaultDate;

    myThings.values.outputs.push({
      d: myThings.library.formatdate(d),
      cond: cond,
      volt: volt,
      blah: blah
    });
  },

  showEm: function() {
    var arout = "";
    for (var i = 0; i < myThings.values.outputs.length; i++) {
      arout += "<div class='outrow'>";
      arout += "<span class='lab'>" + myThings.values.labels.d + "</span>";
      arout += "<span class='outv'>" + myThings.values.outputs[i].d + "</span>";
      arout += "<span class='lab'>" + myThings.values.labels.c + "</span>";
      arout += "<span class='outv'>" + myThings.values.outputs[i].cond + "</span>";
      arout += "<span class='lab'>" + myThings.values.labels.v + "</span>";
      arout += "<span class='outv'>" + myThings.values.outputs[i].volt + "</span>";
      arout += "<span class='lab'>" + myThings.values.labels.b + "</span>";
      arout += "<span class='outv'>" + myThings.values.outputs[i].blah + "</span>";
      arout += "</div>";
    }
    var demo = document.getElementById("demoX");
    demo.innerHTML = arout;
  }
};
var show = document.getElementById("show");
show.addEventListener("click", myThings.library.showEm);
var save = document.getElementById("save");
save.addEventListener("click", myThings.library.saveEm);

This worked great! I was able to finish making a test page. Would you also happen to know how I could show the data on a new page (in a multi-page jquery document)?
I think I've managed to do it. I ended up using <a href="#twoB" id="show">Show logs</a>

Collectives™ on Stack Overflow

Storing user input in javascript array and displaying it

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related