pass values using javascript [object HTMLInputElement] without using alert

Question

I have seen answers to this question on here, but everything I have seen is lighty different to what I am trying to do.. I am passing 3 values from a mobile form, when I view the passed data, one piece of data will not pass and i get this error in it's place.[object HTMLInputElement] The other data displays fine.. The input type with id = companyName is the data I get error on. Here is my html code:

<div data-role="content">
<form>
    <div>
        <input id="title" type="text" placeholder="Job Title" />
    </div>
    <div>
        <input id="companyName" type="text" placeholder="Company Name" />
    </div>
    <div>
        <textarea id="note" placeholder="The description of your job"></textarea>
    </div>
    <div class="ui-grid-a">
        <input id="btnAddNote" type="button" value="Add Job" />
    </div>
</form>
<ul id="notesList" data-role="listview" data-inset="true">
    ``
    <li data-role="list-divider">Job List</li>
    <li id="noNotes">There are no jobs</li>
</ul>

And here is my javascript code:

$(function () {

    // define the application
    var Notekeeper = {};

    (function (app) {

        // variable definitions go here
        var $title = $('#title');
        var $companyName = $('#companyName');
        var $note = $('#note');
        var $ul = $('#notesList');
        var li = '<li><a href="#pgNotesDetail?title=LINK">ID</a></li>';
        var notesHdr = '<li data-role="list-divider">Your Jobs (js)</li>';
        var noNotes = '<li id="noNotes">You have no jobs (js)</li>';

        app.init = function () {
            app.bindings();
            app.checkForStorage();
        }

        app.bindings = function () {
            // set up binding for form
            $('#btnAddNote').bind('click', function (e) {
                e.preventDefault();
                // save the note
                app.addNote(
                    $('#title').val(),
                    $('#note').val(),
                    $('#companyName').val()
                );
            });
            $('#notesList a').live('click', function (e) {
                e.preventDefault();
                var href = $(this)[0].href.match(/\?.*$/)[0];
                var title = href.replace(/^\?title=/, '');
                app.loadNote(title);
            });
            $('#btnDelete').live('click', function (e) {
                e.preventDefault();
                var key = $(this).data('href');
                app.deleteNote(key);
            });
        }

        app.loadNote = function (title) {
            // get notes
            var notes = app.getNotes();
            // lookup specific note
            var note = notes[title];
            var page = '<div data-role="page" data-url="details" data-add-back-btn="true">\
                            <div data-role="header">\
                                <h1>Job Details (js)</h1>\
                                <a id="btnDelete" href="" data-href="ID" data-role="button" class="ui-btn-right">Delete</a>\
                            </div>\
                            <div data-role="content"><h3>TITLE</h3><h4>COMPANYNAME</h4><p>NOTE</p></div>\
                        </div>';
            var newPage = $(page);
            //append it to the page container
            newPage.html(function (index, old) {
                return old
                    .replace(/ID/g, title)
                    .replace(/TITLE/g, title
                        .replace(/-/g, ' '))
                    .replace(/COMPANYNAME/g, companyName)
                    .replace(/NOTE/g, note)

            }).appendTo($.mobile.pageContainer);
            $.mobile.changePage(newPage);
        }

        app.addNote = function (title, note, companyName) {
            var notes = localStorage['Notekeeper'];
            if (notes == undefined || notes == '') {
                var notesObj = {};
            } else {
                var notesObj = JSON.parse(notes)
            }
            notesObj[title.replace(/ /g, '-')] = note;
            localStorage['Notekeeper'] = JSON.stringify(notesObj);
            // clear the three form fields
            $note.val('');
            $title.val('');
            $companyName.val('');
            //update the listview
            app.displayNotes();
        }

        app.getNotes = function () {
            // get notes
            var notes = localStorage['Notekeeper'];
            // convert notes from string to object
            return JSON.parse(notes);
        }

        app.displayNotes = function () {
            // get notes
            var notesObj = app.getNotes();
            // create an empty string to contain html
            var html = '';
            // loop over notes
            for (n in notesObj) {
                html += li.replace(/ID/g, n.replace(/-/g, ' ')).replace(/LINK/g, n);
            }
            $ul.html(notesHdr + html).listview('refresh');
        }

        app.deleteNote = function (key) {
            // get the notes from localStorage
            var notesObj = app.getNotes();
            // delete selected note
            delete notesObj[key];
            // write it back to localStorage
            localStorage['Notekeeper'] = JSON.stringify(notesObj);
            // return to the list of notes
            $.mobile.changePage('notekeeper.html');
            // restart the storage check
            app.checkForStorage();
        }

        app.checkForStorage = function () {
            // are there existing notes?
            if (localStorage['Notekeeper']) {
                // yes there are. pass them off to be displayed
                app.displayNotes();
            } else {
                // nope, just show the placeholder
                $ul.html(notesHdr + noNotes).listview('refresh');
            }
        }

        app.init();

    })(Notekeeper);
});

Thanks in advance..

Answer 1

Your function only accepts a title...

app.loadNote = function (title) {

but then goes on to try to use a companyName, which was never passed in:

.replace(/COMPANYNAME/g, companyName)

You need to fix app.loadNote so that it accepts a company name as one if its parameters.

Normally this would result in an empty value, but you happen to be using a variable with the same name as the ID of your element. There is an often overlooked "feature" where a reference to each element with an ID or a name attribute is stored on the window object in a variable with the same name. So, your input id="companyName" is actually available at window.companyName; this is the variable variable you're actually accessing.

Answer 2

The problem is how you store notes in localStorage so that companyName is not persisted. I changed addNote function to store everything:

notesObj[title.replace(/ /g, '-')] = {
    title: title,
    note: note,
    companyName: companyName
};

So after that you can use companyName in loadNote:

newPage.html(function (index, old) {
    return old.replace(/ID/g, title)
        .replace(/TITLE/g, title.replace(/-/g, ' '))
        .replace(/COMPANYNAME/g, note.companyName)
        .replace(/NOTE/g, note.note)
})

Fixed demo: http://jsfiddle.net/T99CB/

Answer 3

it is because of this line of code

 .replace(/COMPANYNAME/g, companyName)

you have not set the companyName in function app.loadNote so it is being used from initial declartaion

var $companyName = $('#companyName');

and in your addNote you are not using companyName at all???