CODEWITHSUNDEEP
javascriptxml
chris97ong
chris97ong

Reputation: 7070

xml / javascript - Node not created

I have two files: xml_database.xml and login.html. This is my HTML in login.html:

<h2>Login:</h2>
Username: <input type="text" id="login_username"> &nbsp; <input type="button" value="Sign in!" id="sign_in"><br><br><hr>
<h2>Create an account:</h2>
Username: <input type="text" id="create_username"><br><br>
Welcome text: <textarea id="create_welcome" style="vertical-align: text-top;"></textarea>    
<br><br>
<input type="button" value="Create an account!" id="create_account">

And in my xml_database.xml:

<?xml version="1.0" encoding="utf-8"?>
<user username="chris97ong" welcomeText="htrftfd"></user>

So when I click on the button to login in login.html, if "chris97ong" is in the username text input, I want to have an alert saying "htrftfd". This is my Javascript for login.html:

document.getElementById("sign_in").onclick = function() {
xmlDoc = loadXMLDoc("xml_database.xml");
users = xmlDoc.getElementsByTagName("user");    
var username = document.getElementById("login_username").value;
var bool = false;
for(var i = 0; i < users.length && bool == false; i++) {
    if(users[i].getAttribute("username") == username) {
        bool = true;
        alert("Your welcome text is " + users[i].getAttribute("welcomeText")); 
    }
}
if(bool == false) { alert("Such username does not exist"); }
}

And it worked perfectly.

Now I want to be able to create an account with the second section. When the button to create an account is clicked, I want to create a node in xml_database.xml "<user>". I want the "username" attribute of this new element to be what is in the text input (with id "create_username") and the "welcomeText" of this new element to be what is in the textarea (with id "create_welcome").

This is what I have tried:

document.getElementById("create_account").onclick = function() {
xmlDoc = loadXMLDoc("xml_database.xml");
users = xmlDoc.getElementsByTagName("user");    
var username = document.getElementById("create_username").value;
var bool = false;
for(var i = 0; i < users.length && bool == false; i++) {
    if(users[i].getAttribute("username") == username) {
        bool = true;
        alert("Such username already exists");  
    }
}
if(bool == false) {
    var welcomeText = document.getElementById("create_welcome").value;
    new_user = xmlDoc.createElement("user");
    new_user.setAttribute("username",username);
    new_user.setAttribute("welcomeText",welcomeText);   
    alert("Account created");
}
}

But it does not work. When I try to login with this new username, the alert states that such a username does not exist. There were no error messages whatsoever and the xml file was not changed at all. What is wrong with my code that I didn't realise? Thx.



PS: I have this in my <head> tag:

<script src="http://www.w3schools.com/dom/loadxmldoc.js"></script>

Upvotes: 0

Views: 46

Answers (1)

kwiqry
kwiqry

Reputation: 96

The createElement method create element on DOM model build from xml loaded on to browser as you know, so this method does not offer access to read and write local files. Using server side programs such as PHP will be suitable for this solution.

Upvotes: 1

Related Questions