JSON with document.getElementById()

Question

I'm a little confused with this json. I can type in json manually without document.getElementById("anID"); and it works fine. I keep getting unterminated string literal. Can someone show me the correct way of combining [multiple] document.getElementById() and sending them through json?

var form = '{"first_name":"'+document.getElementById("first_name").value+'",
             "last_name":"'+document.getElementById("last_name").value+'"}';

var form = JSON.parse(form);       
    alert(form['first_name']);
    alert(form.last_name);

[Why are you manually building json strings? That's kinda completely backwards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals) — PeeHaa, Jan 06 '16 at 18:25
You can't split a string over multiple lines like you've done. You have to concatenate separate strings, or add a backslash at the end of all the lines before closing `'`. — Teemu, Jan 06 '16 at 18:26
The point isn't to automatically build it. It's proving that something can be done by manually building your own functions. Nothing in programming is automatically built at first. Someone had to program it. — White Lotus, Jan 06 '16 at 18:28
That makes no sense and basically invalidates your question. Learn the basics first before building your own language. — PeeHaa, Jan 06 '16 at 18:29
Reinventing the wheel for the sake of reinventing the wheel is good for learning, but bad for just about everything else. Please don't insult members of the community when we have no context on **what** you're doing or **why** you're doing it. You asked a question, and now there's two answers - the solution you want to hear, and the better solution all around. — Sean, Jan 06 '16 at 18:39
Possible duplicate of [Creating multiline strings in JavaScript](http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) — Teemu, Jan 06 '16 at 18:42
@AswinRamakrishnan Keeping strictly the subject of the question ("I keep getting unterminated string literal."), i.e. apart from weird JSON creation, it's pretty much a dup. — Teemu, Jan 06 '16 at 18:47
@Teemu if we're strictly keeping to the question. AwsinRamakrishnan is right. You're suggesting a mutli-line string. The JSON is not exactly a string and possibly doesn't have to be multi-line. — White Lotus, Jan 06 '16 at 18:49
@WhiteLotus ??? `form` in your code snippet is a _string literal_, and the source of the error, that has nothing to do with JSON. — Teemu, Jan 06 '16 at 18:55
I had to name it something. I could've named it alphacentauri. variables can be any name as you probably know. — White Lotus, Jan 06 '16 at 18:58
@WhiteLotus Please re-read my comment above. In the first line of the snippet you're creating a string, no matter what name it has. — Teemu, Jan 06 '16 at 19:00
JavaScript was interpreting as a string because I accidentally wrote the JSON as a string. JSON's technically aren't strings, you have to run it through the stringify function. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify — White Lotus, Jan 06 '16 at 19:03
@WhiteLotus Oh, c'mon, it doesn't seem to be "accidental", you're trying to parse it afterwards ... EOD. — Teemu, Jan 06 '16 at 19:07

spozun · Answer 1 · 2016-01-06T18:46:06.310

This works. I think this is what you are trying to figure out:

var form = {"first_name":document.getElementById("first_name").value,
                 "last_name":document.getElementById("last_name").value};

console.log(form.first_name);
console.log(JSON.stringify(form));

It occurred to me that this is probably what you really wanted. You need to clean up your quotes, then use a little bit of eval():

var form = {"first_name":"document.getElementById('first_name').value",
             "last_name":"document.getElementById('last_name').value"};

var runThatFunction = eval(form.first_name);    
console.log(runThatFunction);

Aswin Ramakrishnan · Answer 2 · 2016-01-06T19:26:05.653

2

You can just build a Javascript object like this -

var show = function() {
  var form2 = {};
  form2.first_name = document.getElementById("first_name").value;
  form2.last_name = document.getElementById("last_name").value;

  alert(form2['first_name']);
  alert(form2.last_name);
};

<input type="text" id="first_name" value="Eric" />
<input type="text" id="last_name" value="Johnson" />
<a href="#" onclick="show()">Click me!</a>

edited Jan 06 '16 at 19:26

answered Jan 06 '16 at 18:32

Aswin Ramakrishnan

3,195
2
41
65

1

Not to be nit-picky but that's a `JavaScript Object` not a `JSON` object, JSON only exists as a `string` in `JavaScript`. – XCS Jan 06 '16 at 19:17

JSON with document.getElementById()

2 Answers2