Webpage Javascript stops working when I add another function

Question

I'm writing a simple webpage for an assignment that requires I make a form that autopopulates if the ID number entered has a match in an external XML document. All was working fine until I started to add another function to execute on submission that will either add or modify a record (through an AJAX call).

However, after adding this new function, the other one stopped working. If I comment it out, the original function works again.

I can't find any issues with this new function (i.e. all the brackets are in the right place etc). Why is it ruining everything?

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head> 
        <script type="text/javaScript">
            function checkID(val){
                if (val.value.length != 6) //Since student ID's are six digits
                    return;
                //inID = val.value;
                //if (inID.length < 6) return;

                xhr = new XMLHttpRequest();
                xhr.open('GET', 'processor.php?studentID=' + document.forms[0].elements[0].value);
                xhr.onreadystatechange = function() {
                    /**
                    if (xhr.readystate != 4 || xhr.status != 200){
                        document.getElementById("status").innerHTML = "<p> Not Done Yet</p>";
                    }
                    **/
                    if (xhr.readyState === 4 && xhr.status === 200){
                        document.getElementById("status").innerHTML = "";
                        parse(xhr.responseXML); 
                    }
                }
                xhr.send();
                document.getElementById("status").innerHTML = "<p> Not Done Yet</p>";
            }
            function parse(xml){
                if (xml == null) alert("Null!");
                var student = xml.getElementsByTagName('student');
                    if (student.length == 0) alert("No Student's Found with that ID");
                var content = student.item('0');
                    var name = content.getElementsByTagName('fullname');
                    name = name.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[1].value = name;

                    var phone = content.getElementsByTagName('phone');
                    phone = phone.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[2].value = phone;

                    var email = content.getElementsByTagName('email');
                    email = email.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[3].value = email;

            }
            function addOrModify(curr){
                xhr = new XHRHttpRequest();
                xhr.open('GET', 'addOrModify.php?studentID=' + document.forms[0].elements[0].value);
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && xhr.status == 200){
                        if (xhr.responseText == "added")
                            document.getElementByID('status').innerHTML = "Added";
                }
                xhr.send();
            }

        </script>
        <style type="text/css">
            #container {
                margin: 0 auto;
                padding: 30px;
                text-align: center;
            }
            .centerp {
                font-size: 150%;
                text-align: center;
            }
            table {
                align: center;
            }
        </style>
        <title>Student Profile</title>
    </head>

    <body>
        <p class="centerp"> Student Profiles </p>
        <div id="container">
            <form method="GET" action="">
                <table align="center">
                    <label>
                        <tr>
                            <td>Student ID</td> 
                            <td><input type="text" name="studentID" onblur="checkID(this)"> </input></label></td>
                        </tr>
                    </label>
                    <label>
                        <tr>
                            <td>Name</td> 
                            <td><input type="text" name="name" id="name"> </input></label></td>
                        </tr>
                    </label>
                    <label>
                        <tr>
                            <td>Phone</td> 
                            <td><input type="text" name="phone"> </input></label></td>
                        </tr>
                    </label>
                    <label>
                        <tr>
                            <td>Email</td> 
                            <td><input type="text" name="email"> </input></label></td>
                        </tr>
                    </label>
                        <tr>
                            <td> <input type="submit" onclick="addOrModify()"> </input></td></tr> </td>
                        </tr>
                        <tr>
                            <td> <div id="status">
                                </div> </td>
                        </tr>
                </table>
            </form>
        </div>
    </body>
</html>

Validate your syntax using something like www.jslint.com

Mark Chorley
– Mark Chorley

2013-04-15 16:20:02 +00:00
Commented Apr 15, 2013 at 16:20 — Mark Chorley
– Mark Chorley, Commented Apr 15, 2013 at 16:20
@SLaks What debugger? I'm using Notepad++

CodyBugstein
– CodyBugstein

2013-04-15 17:18:03 +00:00
Commented Apr 15, 2013 at 17:18 — CodyBugstein
– CodyBugstein, Commented Apr 15, 2013 at 17:18
@Imray: The developer tools in your browser.

SLaks
– SLaks

2013-04-15 23:41:21 +00:00
Commented Apr 15, 2013 at 23:41 — SLaks
– SLaks, Commented Apr 15, 2013 at 23:41

Jochem261 · Accepted Answer · 2013-04-15 16:16:29Z

2

You say all the brackets are in the right place, but they are not.

You're not closing

if (xhr.readyState == 4 && xhr.status == 200){

In your last function

answered Apr 15, 2013 at 16:16

Jochem261

2171 silver badge5 bronze badges

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

2 Comments

Steve Wellens Over a year ago

That is why I like brackets aligned vertically instead of indented.

CodyBugstein Over a year ago

Aw I feel really dumb! I went through it multiple times but didn't notice that! Nonetheless, why would that affect the other functions? Shouldn't it only cause a problem once I call that function?

Dominic Green · Accepted Answer · 2013-04-15 16:20:15Z

By running your code in jsfiddle here you can see in the debugger that you are missing a }

In the console you get Error = SyntaxError: missing } after function body.

So by looking through your code your simply missing a } at the end see http://jsfiddle.net/3QNHf/1/

I have also wrapped up some of your if statements, its better practice and easier to debug to use

if(statement){ do somthing}

rather than

if(statement)do something

Full Code

function checkID(val){
      if (val.value.length != 6){ //Since student ID's are six digits
          return;}
                //inID = val.value;
                //if (inID.length < 6) return;

                xhr = new XMLHttpRequest();
                xhr.open('GET', 'processor.php?studentID=' + document.forms[0].elements[0].value);
                xhr.onreadystatechange = function() {
                    /**
                    if (xhr.readystate != 4 || xhr.status != 200){
                        document.getElementById("status").innerHTML = "<p> Not Done Yet</p>";
                    }
                    **/
                    if (xhr.readyState === 4 && xhr.status === 200){
                        document.getElementById("status").innerHTML = "";
                        parse(xhr.responseXML); 
                    }
                }
                xhr.send();
                document.getElementById("status").innerHTML = "<p> Not Done Yet</p>";
            }
            function parse(xml){
                if (xml == null){ alert("Null!")};
                var student = xml.getElementsByTagName('student');
                if (student.length == 0){ alert("No Student's Found with that ID")};
                var content = student.item('0');
                    var name = content.getElementsByTagName('fullname');
                    name = name.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[1].value = name;

                    var phone = content.getElementsByTagName('phone');
                    phone = phone.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[2].value = phone;

                    var email = content.getElementsByTagName('email');
                    email = email.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[3].value = email;

            }
            function addOrModify(curr){
                xhr = new XHRHttpRequest();
                xhr.open('GET', 'addOrModify.php?studentID=' + document.forms[0].elements[0].value);
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && xhr.status == 200){
                        if (xhr.responseText == "added")
                            document.getElementByID('status').innerHTML = "Added";
                }
                xhr.send();
            }
            }

This is not going to work, you're now sending xhr when the readystate changes. However it will not change if you don't send it. Simply adding a bracket at the end of the code is not the right solution.

Collectives™ on Stack Overflow

Webpage Javascript stops working when I add another function

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related