ReferenceError: insertRecord is not defined

StackOverflow https://stackoverflow.com/questions/15922868

Question

I have this html code that's supposed to retrieve a local json file and have it parse and stringify to the local storage. I wanted to test the code, but when I fill out the form and run it, it says ReferenceError: insertRecord is not defined in Firefox console.

Any help would be very much appreciated. Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Register</title>
<link href="css/navigation.css" rel="stylesheet" type="text/css">
<link href="css/body.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="store.js" type="text/javascript"></script>
<script type="text/javascript">
var i;
var user;
var txt;

$(document).ready(function () {
    $.ajax({
    type: "GET",
    url: "studio.json",
    dataType: "json",
    success: getUser,
    error: function() {alert("retrieval error"); }
});
});

function getUser(data) {
if (localStorage) {
    if (!localStorage.getItem('user')) {
        user = JSON.parse(data.User);
        localStorage.setItem('user', user);
    }

    else {
        String item = localStorage.getItem('user');
        user = JSON.parse(item);
    }
}

else
    alert("Local Storage not supported");
}

function insertRecord() {
$.ajax({
    type: "GET",
    url: "studio.json",
    dataType: "json",
    success: insertUser,
    error: function(){ alert("retrieval error"); }
});

function insertUser() {
    txt = { firstName: document.getElementById("firstName").value,
            lastName: document.getElementById("lastName").value,
            userName: document.getElementById("userName").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value
          };
    localStorage.setItem('user', user + JSON.stringify(txt));
}
}

</script>
</head>

<body>
<img src="images/Dance etc logo LARGE.jpg" width="263" height="150" alt="Dance Etc Logo" />
<hr />
<div data-role="header">
    <h1>Dance Etc.</h1>
</div>

<div data-role="content" >
    <h1>Register</h1>
    <form method="post" action="" id="register" name="form">
    <label>First Name: </label>
    <input type="text" id="firstName" /><br />
    <label>Last Name: </label>
    <input type="text" id="lastName" /><br />
    <label>Username: </label>
    <input type="text" id="userName" /><br />
    <label>Email: </label>
    <input type="text" id="email" /><br />
    <label>Password: </label>
    <input type="password" id="password" /><br />
    <input type="submit" value="Register" onClick="insertRecord()" />
    </form>
</div>

<div data-role="footer">
    <a href="Dance_Program">Contact Us</a>
    <a href="Register">Policy</a>
    <a href="Login">History</a>
</div>

Was it helpful?

Solution

In your code you have the following line:

String item = localStorage.getItem('user');

This isn't valid JavaScript and is therefore throwing a SyntaxError: Unexpected identifier, preventing the rest of your JavaScript code from being evaluated.
However, as you try to attach insertRecord inline in the HTML, it tries to run when triggered, but can't invoke code that didn't get evaluated.

You should consider attaching event listeners using element.addEventListener. Additionally, indenting your code may help you debug, too.

var i, user, txt;

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "studio.json",
        dataType: "json",
        success: getUser,
        error: function () {
            alert("retrieval error");
        }
    });
});

function getUser(data) {
    if (localStorage) {
        if (!localStorage.getItem('user')) {
            user = JSON.parse(data.User);
            localStorage.setItem('user', user);
        } else {
            item = localStorage.getItem('user');
            user = JSON.parse(item);
        }
    } else
        alert("Local Storage not supported");
}

function insertRecord() {
    $.ajax({
        type: "GET",
        url: "studio.json",
        dataType: "json",
        success: insertUser,
        error: function () {
            alert("retrieval error");
        }
    });

    function insertUser() {
        txt = {
            firstName: document.getElementById("firstName").value,
            lastName: document.getElementById("lastName").value,
            userName: document.getElementById("userName").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value
        };
        localStorage.setItem('user', user + JSON.stringify(txt));
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top