Javascript reading html input values

Question

I am trying to make a Javascript script that asks the user to enter details about a book, and then it generates an MLA style citation for it. The following is my HTML code.

<input type="text" value="Author last name" id="lname"/><br />

<input type="text" value="Title of book" id="booktitle"/><br />


<input type="text" value="City of Publication" id="pubcity"/><br />

<input type="text" value="Publisher" id="pub"/><br />

<input type="text" value="Year of Publication" id="pubyear"/><br />
<input type="text" value="Number of footnote" id="footnote"/>
<br />('Number of footnote' only applicable if you plan to generate a footnote citation.)<br />

<button type="button" onclick="generateBookFootnote()">Generate Footnote</button>
<button type="button" onclick="generateBookEndnote()">Generate Endnote</button> 
</form>
<p id="cite"></p>

And my Javascript is as follows.

function generateBookFootnote()
{
    //I was just trying to do this, which I got from another StackOverflow question. Result below.
    var fname = document.getElementById('fname');
    var lname = document.getElementById('lname');
    var booktitle = document.getElementById('bookititle');
    var pubcity = document.getElementById('pubcity');
    var pubyear = document.getElementById('pubyear');
    var pub = document.getElementById('pub');
    var footnote = document.getElementById('footnote');

    document.getElementById("cite").innerHTML=document.getElementById( fname ); 

};

So I've tried many approaches from the Internet, trying to just get it to print out the contents of the text box fname. var fname = document.getElementById('fname'); prints out [object HTMLInputElement] not the actual value. The document.getElementById("cite").innerHTML=document.getElementById( fname ); doesn't print anything when I run the function. Those are the only two solutions I have found on the Internet so far.

Danilo Valente · Accepted Answer · 2013-01-09 05:00:52Z

4

That's because document.getElementById returns an object of type HTMLElement, which is the element that has the specified ID. To access its value, use this instead:

var fname = document.getElementById('fname').value;

I suggest you to take a look at HTMLElement and getElementById MDN documentations

This issue also applies to either getElementsByClassName, getElementsByTagName and getElementsByName methods, although they all return an array with the matching elements.

Thus, your function should be:

function generateBookFootnote()
{
    var fname = document.getElementById('fname').value;
    var lname = document.getElementById('lname').value;
    var booktitle = document.getElementById('bookititle').value;
    var pubcity = document.getElementById('pubcity').value;
    var pubyear = document.getElementById('pubyear').value;
    var pub = document.getElementById('pub').value;
    var footnote = document.getElementById('footnote').value;

    document.getElementById("cite").innerHTML = document.getElementById( fname ).value; 

};

edited Jan 9, 2013 at 5:00

answered Jan 9, 2013 at 4:53

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Piccolo Over a year ago

So why can't you do document.getElementById("cite").innerHTML = fname? When I do that, it returns a blank statement. To clarify, I did put var fname = document.getElementById('fname').value;.

Danilo Valente Over a year ago

Because document.getElementById("cite").innerHTML = fname will display [object HTMLInputElement], and not it's value. Actually I didn't understand what you wanted to do in this line, since I couldn't find the element with the fname ID (maybe you wanted to do document.getElementById("cite").innerHTML = fname;)

Andbdrew · Accepted Answer · 2013-01-09 04:54:12Z

1

after you select an input element by id with something like:

var fname = document.getElementById('fname');

you can see its current value through the value property. for example:

console.log(fname.value);

answered Jan 9, 2013 at 4:54

Andbdrew

11.9k4 gold badges35 silver badges37 bronze badges

Comments

Hary · Accepted Answer · 2013-01-09 04:54:58Z

1

Check your code properly. You've used the object instead of id.

var fname = document.getElementById('fname');

document.getElementById("cite").innerHTML=document.getElementById( fname );

Use this instead

document.getElementById("cite").innerHTML=document.getElementById('fname');

answered Jan 9, 2013 at 4:54

Hary

5,8368 gold badges49 silver badges91 bronze badges

Collectives™ on Stack Overflow

Javascript reading html input values

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related