How to write data from Form in HTML to XML with Javascript
-
This is an assignment from my class. What I need to do is create a registration page. When the user presses the submit button, I have take all the information on the form and write it to an existing XML file using Javascript. This is done on the client side, only through HTML, Javascript, and XML. By the way, my Professor purposely did not teach us how to do this because he wants us to research on it by ourselves. Also, I'm not too familiar with Javascript, especially with the built in functions, if possible please explain what each line or method of code is doing. Let me begin, here's how my existing XML looks like: <?xml version ="1.0" encoding="utf-8" ?> <!--GGFGFGFVBFVVVHVBV--> <PersonInfo> <Person Usrname="Bob111" Pswd="Smith111" personid="111" FirstName="Bob" LastName="Smith" DOB="01/01/1960" Gender="M" Title="Hello1"> </Person> <!-- several more lines of <person> here --> </PersonInfo> When saving the form data, it has to follow all the layout within , basically I would need Usrname, Pswd, personid, and so on. Basically, from what I understand, I have to create the XML line "Person" from my registration page once I press submit. Then push it to the array that already have my XML information, then write over my XML document with the information on the array. My problem is, I have exactly no idea how to do that. For those who wants to know how my registration page looks like, here it is: <html> <head> <title>Registration</title> <link rel="stylesheet" type="text/css" href="CSS_LABs.css" /> </head> <body> <div class="form"> <form id="Registration" action="" method="get"> Username:<input type="text" name="usrname" maxlength="10"/> <br/> Password:<input type="password" name="pswd" maxlength="20"/> <br/> <hr> PersonID:<input type="text" name="PID" /> <br> <hr> First Name:<input type="text" name="fname"/> <br> Last Name:<input type="text" name="lname"/> <hr> DOB:<input type="text" name="dob" /> <br> <hr> Gender:<input type="text" name="sex" /> <br> <hr> Title:<input type="text" name="title" /> <br> <hr> Secret Question:<br> <select name="secret?"> </select> <br> Answer:<input type="text" name="answer" /> <br> <br> <input type="submit" value="submit" /> </form> </div> </body> </html> By the way, I know certain information on my HTML document may not be worded properly, so do hope you guys don't mind. Also, I would also have to fix up my XML later by putting the answer to the secret question within later. Alright, thanks a lot in advance guys. UPDATE!!! Here we go, I finally figured out how to create an XML document with Javascript, here's the code: var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); var fso = new ActiveXObject("Scripting.FileSystemObject"); var FILENAME = 'G:\\CST2309 - Web Programming 1\\Copy of Take Home Exam - Copy\\PersonXML2.xml'; function SaveXML(UserData) { var file = fso.CreateTextFile(FILENAME, true); file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n'); file.WriteLine('<PersonInfo>\n'); for (countr = 0; countr < UserData.length; countr++) { file.Write(' <Person '); file.Write('Usrname="' + UserData[countr][0] + '" '); file.Write('Pswd="' + UserData[countr][1] + '" '); file.Write('PersonID="' + UserData[countr][2] + '" '); file.Write('FirstName="' + UserData[countr][3] + '" '); file.Write('LastName="' + UserData[countr][4] + '" '); file.Write('Gender="' + UserData[countr][5] + '" '); file.Write('DOB="' + UserData[countr][6] + '" '); file.Write('Title="' + UserData[countr][7] + '"'); file.WriteLine('></Person>\n'); } // end for countr file.WriteLine('</PersonInfo>\n'); file.Close(); } // end SaveXML function -------------------- function LoadXML(xmlFile) { xmlDoc.load(xmlFile); return xmlDoc.documentElement; } //end function LoadXML() function initialize_array() { var person = new Array(); var noFile = true; var xmlObj; if (fso.FileExists(FILENAME)) { xmlObj = LoadXML(FILENAME); noFile = false; } // if else { xmlObj = LoadXML("PersonXML.xml"); //alert("local" + xmlObj); } // end if var usrCount = 0; while (usrCount < xmlObj.childNodes.length) { var tmpUsrs = new Array(xmlObj.childNodes(usrCount).getAttribute("Usrname"), xmlObj.childNodes(usrCount).getAttribute("Pswd"), xmlObj.childNodes(usrCount).getAttribute("PersonID"), xmlObj.childNodes(usrCount).getAttribute("FirstName"), xmlObj.childNodes(usrCount).getAttribute("LastName"), xmlObj.childNodes(usrCount).getAttribute("Gender"), xmlObj.childNodes(usrCount).getAttribute("DOB"), xmlObj.childNodes(usrCount).getAttribute("Title")); person.push(tmpUsrs); usrCount++; } //end while if (noFile == false) fso.DeleteFile(FILENAME); SaveXML(person); } // end function initialize_array() What this code here is doing is that, it takes my original XML file and loads it up into an array so it can create a new XML file. Basically I got the creating the XML file part down, but still need help with the rest of my stuff. My goal is trying to take my form data and push it into my existing array, not overwrite it, add to it, so I can update my existing XML file with the new registration information. This is where I have absolutely no idea how to do. Some pointers would be nice.
-
Answer:
By the way, my Professor purposely did not teach us how to do this because he wants us to research on it by ourselves. Which should give you a hint about searching a bit more deeply. Anyhow, I'm not going to comment on every line, but I will offer some hints. var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); That is a Microsoft proprietary way of creating an XML document and it is normally wrapped in try..catch as different ActiveXObjects are provided in different versions of IE. You also need to look for document.implementation.createDocument. //DEFINE LOAD METHOD function LoadXML(xmlFile) { xmlDoc.load(xmlFile); You might want to check out the async parameter. xmlObj = xmlDoc.documentElement; } //declare & initialize array var arrPerson = new Array(); It is considered better practice to use an array literal: ... = []; //initialize array w/ xml function initialize_array() { LoadXML("PersonXML.xml"); var x = 0; while (x < xmlObj.childNodes.length) Getting the length of xmlObj.childNodes on every loop is inefficient, consider storing the length and comparing with that value. { var tmpArr = new Array(xmlObj.childNodes(x).getAttribute("Usrname"), xmlObj.childNodes(x).getAttribute("Pswd"), xmlObj.childNodes(x).getAttribute("FirstName"), xmlObj.childNodes(x).getAttribute("LastName"), xmlObj.childNodes(x).getAttribute("DOB"), xmlObj.childNodes(x).getAttribute("Gender"), xmlObj.childNodes(x).getAttribute("Title")); It is very inefficient to access xmlObj.childNodes(x) repeatedly. Store a reference and reuse it. arrPerson.push(tmpArr); You could assign the values directly to arrPerson and get rid of tmpArr. x++; Using a plain for loop will increment x for you. } } //Validation function LogInVal(objtxt) { if(objtxt.value.length == 0) { objtxt.style.background = "red"; return 1; } else { objtxt.style.background = "white"; return 0; } } Not all browsers will let you style the background color of input elements. //main validation function MainVal(objForm) { var errmsg = "empty field"; var errmsg2 = "Incorrect Username and Password"; You might want a better way of naming the error messages and relating them to other information for that message. An object might do the job. var msg = "You have logged in successfully"; var errCount = 0; var usrn = document.getElementById("usrname1").value; var pswd = document.getElementById("pswd1").value; errCount += LogInVal(objForm.usrname); errCount/*1*/ += LogInVal(objForm.pswd); initialize_array(); if (errCount != 0) { alert(errmsg); return false; } else if(authentication(usrn, pswd) == true) The function authentication() returns true or false, so you don't need to compare it to anything, you can just test the returned value (i.e. there is no need for == true above). { alert(msg); return true; setCookie('invalidUsr',' ttttt'); } else { alert(errmsg2); return false; } } Instead of showing alert messages one at a time in an alert, consider putting them in the document adjacent to the elements they relate to. That way the user can see the messaeg while fixing the error.
MNX1024 at Stack Overflow Visit the source
Other answers
Isn't it cheating to ask us? Your implementation will probably only work in IE, I'd recommend using jQuery as it is impressively powerful at parsing XML. I'm not sure why he wants you to write out XML as it's not very intuitive coming from JavaScript. You can do something like this via jQuery //I capture form submitevent $('form').submit(function( ev ){ ev.preventDefault(); //I keep form from submitting $( xmlDocument ).find('Person').attr({ username: $("input[name=usrname]), password: $("input[name=pswd]), //and so on }); }); It's up to you on how you 'report' this xml file
Drew
Related Q & A:
- How to access a nested function from another nested function in javascript?Best solution by devarticles.com
- How to output data in xml?Best solution by Stack Overflow
- How to store data in php and get data from php?Best solution by Stack Overflow
- How to write binary data to a file?Best solution by Stack Overflow
- How to write XML file with Java and read it?Best solution by Stack Overflow
Just Added Q & A:
- How many active mobile subscribers are there in China?Best solution by Quora
- How to find the right vacation?Best solution by bookit.com
- How To Make Your Own Primer?Best solution by thekrazycouponlady.com
- How do you get the domain & range?Best solution by ChaCha
- How do you open pop up blockers?Best solution by Yahoo! Answers
For every problem there is a solution! Proved by Solucija.
-
Got an issue and looking for advice?
-
Ask Solucija to search every corner of the Web for help.
-
Get workable solutions and helpful tips in a moment.
Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.