We Keep Coding

Javascript AJAX How to Fetch Data from API by ID

I'm trying to create a program that allows a user to input a number and fetches the movie data from an API by accessing the id index, so for example if I wanted to access the 3rd ID of the API, it would fetch all the elements from "https://my-json-server.typicode.com/daijonbereola/restful-api-react/movies/3". So far, no movie has been found and am not sure what is wrong with my Javascript. Here it is pasted below:
<form>
<input type="number" id="inputId" placeholder="Enter a number"/>
<input type="button" id="fetchId" value="Fetch Movie" class="btn btn-primary"/>
</form>
<script>
let id = document.getElementById("inputId").value;
let fetchId = document.getElementById("fetchId");
fetchId.addEventListener("click", selectHandler);
function selectHandler() {
// Instantiate an new XHR Object
const xhr = new XMLHttpRequest();
// Open an obejct (GET/POST, PATH,
// ASYN-TRUE/FALSE)
xhr.open("GET",
`https://my-json-server.typicode.com/daijonbereola/restful-api-react/movies/${id}`, true);
// When response is ready
xhr.onload = function () {
if (this.status === 200) {
// Changing string data into JSON Object
obj = JSON.parse(this.responseText);
// Getting the element
let list = document.getElementById("list");
id = obj.id;
console.log(id);
if(id){
str = ""
str +=
`
<div style="padding: 5px 5px;">
<a href=${obj.url}>${obj.title}</a>
<image style="max-width: 60%;"src=${obj.image} alt = "movie poster"/>
</div>
`;
list.innerHTML = str;
} else{
str = ""
str += `<p>Movie not found...Please try again</p>`;
list.innerHTML = str;
}
}
else {
console.log("File not found");
}
}
xhr.send();
}
</script>

Get data from input using template literals as id

I have a program that makes a table using json data. This technique uses template liretals, so i can add rows myself however i want. My problem is that I need to get data from an input, which has a template literal as an id, but the getElementById doesn't allow me to.
I have already tried escaping my brackets, but that doesn't work. I have looked into using a simple index, but i don't know how I could set it up in my function.
Here is the javascript code:
//load JSON file
var articles = ""
var txt = ""
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
articles = xmlhttp.responseText;
txt = JSON.parse(articles);
processArticles(txt);
processForm(txt);
}
};
xmlhttp.open("GET","../articles.json",true);
xmlhttp.send();
function processArticles(txt) {
var tableStart = `
<h2>Liste des articles</h2>
<form id="formtable">
<table>
<tr>
<th>ID</th>
<th>Article</th>
<th>Prix</th>
<th>Prix-Retour</th>
<th>Quantitée maximale</th>
<th>Projet</th>
<th>Quantitée</th>
</tr>`;
var tableEnd = `
</table>
<input type="submit">
</form>`;
function articlesTemplate(txt, index) {
return `
<tr>
<td>${txt.ID}</td>
<td>${txt.Article }</td>
<td>${txt.Prix}</td>
<td>${txt.PrixRetour}</td>
<td>${txt.QuantiteeMaximale}</td>
<td>${txt.Projet}</td>
<td><input type="number" name="quantity${txt.ID}" id="quantity${txt.ID}" min="1" max="5"></td>
</tr>
`;
}
let mctxt=txt.filter(value=>
value.Projet=="mc");
document.getElementById("tablemc").innerHTML = `
${tableStart}
${mctxt.map(articlesTemplate).join("")}
${tableEnd}
`;
;
}
The problem is in the .getElementById of my quantity in this last function.
function processForm(txt) {
var form = document.getElementById('formtable');
var quantity = document.getElementById(`"quantity$\\{txt.ID\\}"`);
form.onsubmit = function(e) {
e.preventDefault();
console.log("HI");
console.log(quantity.value);
};
}
I want to be able to collect the quantity of each object selected and also the price of that same object, so that i can make a total price at the end of the table.

I think you accidentally did bad quoting like #DontVoteMeDown already mentioned.
Lets assume
txt.ID = 2
then the template string
`<input ... id="quantity${txt.ID}" />`
will result in
<input ... id="quantity2" />
as well as the selector's template string
document.getElementById(`quantity${txt.ID}`);
will result in
document.getElementById("quantity2");
So it should work in general.
If you want to sum all input values of the resulting table, you have to select all inputs and iterate over the values.
var total = 0;
document.querySelectorAll('#formtable input').forEach(function(input) {
total += parseInt(input.value);
})

req.send('null') is not a function Node.js mySQl

I'm trying to insert a form into a MySql database and while the database does, in fact, have the values stored from the for. It doesn't refresh the table being displayed on the page, only when I restart the server and visit the page again will I see the entries.
Additionally, I get a res.send is not a function type error on the line that is req.send('null').
The client side ASync ajax listener for the insert
document.getElementById('addExerciseButton').addEventListener('click',function(event){ //Add listener to addExerciseButton
var addExercise = document.getElementById("addExercise");
var request = new XMLHttpRequest();
//sets the query URL for the DB interactions
var holder ="exercise="+addExercise.elements.exercise.value+"&reps="+addExercise.elements.reps.value+"&weight="+addExercise.elements.weight.value+"&date="+addExercise.elements.date.value;
if(addExercise.elements.lbsOr.checked){
holder += "&lbsOr=1"; //bool check again
}
else{
holder += "&lbsOr=0";
}
request.open("GET", "/insert?" + holder, true); //Open the get request for asynchronous with the holder url packed
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.addEventListener('load', function(){
if(request.status >= 200 && request.status < 400){
var response = JSON.parse(request.responseText);
var id = response.inserted;
//prepping for table fill
var table = document.getElementById("exerciseTable");
var row = table.insertRow(1);
//creating cells and appending them to the rows to match the headers
var exerName = document.createElement('td');
exerName.textContent = document.getElementById('exercise').value;
row.appendChild(exerName);
var repCount = document.createElement('td');
repCount.textContent = document.getElementById('reps').value;
row.appendChild(repCount);
var weightAmount = document.createElement('td');
weightAmount.textContent = document.getElementById('weight').value;
row.appendChild(weightAmount);
var completion = document.createElement('td');
completion.textContent = document.getElementById('date').value;
row.appendChild(completion);
var unitChecker = document.createElement('td');
if(addExercise.elements.lbsOr.checked){ //once again the bool strikes comparing, you guessed it, lbs or kg
unitChecker.textContent = "lbs";
}
else{
unitChecker.textContent = "kg";
}
row.appendChild(unitChecker);
//adding the up date and delete buttons with DOM for each row
var yupDate = document.createElement('td');
var updateDataLink = document.createElement('a');
updateDataLink.setAttribute('href','/entryEdit?id=' + id);
var updateButton = document.createElement('input');
updateButton.setAttribute('value','Edit');
updateButton.setAttribute('type','button');
updateDataLink.appendChild(updateButton);
yupDate.appendChild(updateDataLink);
row.appendChild(yupDate);
var deleteCell = document.createElement('td');
var deleteButton = document.createElement('input');
deleteButton.setAttribute('type','button');
deleteButton.setAttribute('name','delete');
deleteButton.setAttribute('value','Delete');
deleteButton.setAttribute('onClick', 'deleteData("dataTable",' + id +')');//calls deleteData function with ID as a param
var deleteHidden = document.createElement('input');
deleteHidden.setAttribute('type','hidden'); //those hidden attributes though
deleteHidden.setAttribute('id', 'delete' + id);
deleteCell.appendChild(deleteButton);
deleteCell.appendChild(deleteHidden);
row.appendChild(deleteCell);
}
else {
console.log("error");
}
});
request.send(null);
event.preventDefault(); //no refreshes!
});
the server side database manipulation code
app.get('/insert',function(req,res,next){
var context = {};
pool.query("INSERT INTO `workouts` (`name`, `reps`, `weight`, `date`, `lbs`) VALUES (?, ?, ?, ?, ?)",
[req.query.exercise,
req.query.reps,
req.query.weight,
req.query.date,
req.query.lbsOr],
function(err, res){
if(err){
next(err);
return;
}
context.inserted = res.insertId;
res.send(JSON.stringify(context));
});
});
the Html code
<h1>Please add an exercise!</h1>
<form id="addExercise">
Exercise:
<input type="text" name="exercise" id="exercise"><br>
Reps:
<input type="number" name="reps" id="reps "min="1"><br>
Weight:
<input type="number" name="weight" id="weight "min="1"><br>
Date:
<input type="date" name="date" id="date"><br>
Check for Lbs:
<input type="checkbox" name="lbsOr" id="lbsOr"><br>
<input type="submit" name="Add Exercise" value = "Add Exercise" id="addExerciseButton">
</form><br>
<!-- table with permanent headers and then parses the "results " that get passed to this page by one of the many functions-->
<table id="exerciseTable">
<tr>
<th>Name</th>
<th>Reps</th>
<th>Weight</th>
<th>Date</th>
<th>Unit</th>
<th>Update</th>
<th>Delete</th>
</tr>
{{#if results}}
{{#each results}}
<tr>
<td>{{this.name}}</td>
<td>{{this.reps}}</td>
<td>{{this.weight}}</td>
<td>{{this.date}}</td>
<td>{{this.lbs}}</td>
<td><input type="button" value="Update"></td>
<td>
<input type="button" name="delete" value="Delete" onClick="deleteData('dataTable',{{this.id}})">
<input type="hidden" id="delete{{this.id}}">
</td>
</tr>
{{/each}}
{{/if}}
</table>
<script src="./java.js"></script>
any help with this is greatly appreciated, let me know if you guys need more code, I'm new to the whole Stack overflow thing.

I solved it!
` function(err, res){
if(err){
next(err);
return;
}
context.inserted = res.insertId;
res.send(JSON.stringify(context));
});`
should be'
` function(err, result){
if(err){
next(err);
return;
}
context.inserted = result.insertId;
res.send(JSON.stringify(context));
});`
I was double defining res, which would throw the error.

How to pass a values from two different function to third function in javascript?

I'm trying to code an exercise in html page with javascript, to calculate the mean of a random array of 6 numbers that generated from randomArray() function.
After the first loading of the page and when i click "new problem" button this function recalled to copy the random array in a cell of table.
I write calcMean to calculate the mean of the random array which was passed from randomArray() , and i make the form stop refreshing the page when i hit Enter key when i enter a input , and return the value of input by searchm()
but the problem now is , i want to take the mean ,maxi,mini and inans , to another function to compare the real answer with the user answer and if the condition is yes , something wrote on a div .
the second problem is , i want to take the mean value from calcMean() to show it on the input if i clicked "solution" button which call solution() method, what i must pass to the last function to go write.
<div >
<form action="" method="post" name="meanForm" onsubmit='return false' id="formmine">
<table width="100%" border="0" >
<tr>
<td colspan="3" style="background-color:#06F ;color:#FFF">Answer this problem</td>
</tr>
<tr>
<td style="color:green; font-size:20px">What is the mean of these numbers </td>
<td colspan="2" id="numbers">
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr id="answerANDpic">
<td height="62" colspan="3" align="center" > <input name="" type="text" size="15" maxlength="100" height="50" style=" border: solid #0C0 ; border-width:thin" id="answer" onkeydown="searchm(this)"/> </td>
</tr>
<tr>
<td colspan="3" ><div id ="explain" ></div></td>
</tr>
<tr>
<td> </td>
<td><input name="" type="button" id="newEx" style="background-color:green ; color:white" align ="left" value="New Problem" class="send_feed" onclick="randomArray(6,0,99)" /></td>
<td><input name="" type="button" id="solution" style="background-color:#606 ; color:#FFF " align="left" class="send_feed" value="Solution" onclick="solution()"/></td>
</tr>
</table>
</form>
</div>
but in javascript
var myNumArray = randomArray(6,0,99);
function random_number(min,max) {
return (Math.round((max-min) * Math.random() + min));
}
function randomArray(num_elements,min,max) {
var nums = new Array;
for (var element=0; element<num_elements; element++) {
nums[element] = random_number(min,max);
}
document.getElementById("numbers").innerHTML=nums;
calcMean(nums);
}
function calcMean(nums) {
var num=0;
for (var i=0;i<nums.length;i++) {
num += parseFloat( nums[i], 6 );
}
var divide=num/nums.length;
var mean=(parseInt(divide,10));
var maxi = Math.max.apply(Math,nums);
var mini = Math.min.apply(Math,nums);
return mean,maxi,mini;
}
function searchm(ele) {
if(event.keyCode == 13) {
// alert(ele.value); // i get the value and put it on alert
var inans= ele.value;
return inans;
}
}
function comparing(mean,maxi,mini,inans) {
if(inans==mean){document.getElementById("explain").innerHTML= "correct"+","+inans+"," +maxi+","+mini;
}
}
function solution() {
//some code to take the mean value(realvalue)from calcMean()
//what is parameter should i pass it when i click on solution button to pass it this function
}

Learn Objects https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
with Objects you can return any kind of data types from your functions
for example
function calcMins (nums) {
// ...
return {mean: mean, maxi: maxi, mini: mini}
var values = calcMins(nums)
var mean = values.mean // and so on
at solution() you need to read your document.getElementById("numbers").innerHTML and run
calcNums(nums) from saved numbers. After that you may compare values.mean with your input mean
Not writing full code, cause it's exercise, discover the ways how to use functions, Objects, or Arrays, seems you are familiar with arrays
return [mean, maxi, mini] will work, try it too

You can change to something like this.
As others users said, you can't return multiple values, so convert it to an object
var valuesReturned = null; // initialize variable
function randomArray(num_elements,min,max) {
var nums = new Array;
for (var element=0; element<num_elements; element++) {
nums[element] = random_number(min,max);
}
document.getElementById("numbers").innerHTML=nums;
valuesReturned = calcMean(nums);
}
function calcMean(nums) {
var num=0;
for (var i=0;i<nums.length;i++) {
num += parseFloat( nums[i], 6 );
}
var divide=num/nums.length;
var mean=(parseInt(divide,10));
var maxi = Math.max.apply(Math,nums);
var mini = Math.min.apply(Math,nums);
return {"mean":mean, "maxi": maxi, "mini": mini}; //convert to an object
}
function solution() {
if(valuesReturned) {
// make your stuff
// valuesReturned.mean
// valuesReturned.mini
// valuesReturned.maxi
}
}
EDIt
For searchm() function
function searchm() {
if(event.keyCode == 13) {
var values = calcMean();
var inans= values.mini;
return inans;
}
}

Declare a new array in calcMean function and push all mean , mini , maxi
value in new array. And get these value in solution like this :
var myNumArray = randomArray(6,0,99);
var numarr=new Array();
function random_number(min,max) {
return (Math.round((max-min) * Math.random() + min));
}
function randomArray(num_elements,min,max) {
var nums = new Array;
for (var element=0; element<num_elements; element++) {
nums[element] = random_number(min,max);
}
document.getElementById("numbers").innerHTML=nums;
numarr= calcMean(nums);
}
function calcMean(nums) {
var num=0;
for (var i=0;i<nums.length;i++) {
num += parseFloat( nums[i], 6 );
}
var divide=num/nums.length;
var arr=new Array();
var mean=(parseInt(divide,10));
var maxi = Math.max.apply(Math,nums);
var mini = Math.min.apply(Math,nums);
arr.push(mean);
arr.push(maxi);
arr.push(mini);
return arr;
}
function searchm(ele) {
if(event.keyCode == 13) {
// alert(ele.value); // i get the value and put it on alert
var inans= ele.value;
return inans;
}
}
function comparing(mean,maxi,mini,inans) {
if(inans==mean){document.getElementById("explain").innerHTML= "correct"+","+inans+"," +maxi+","+mini;
}
}
function solution() {
alert(numarr[0]); //for mean value
alert(numarr[1]); // for maxi
alert(numarr[2]); // for maxi
}

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.

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.

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

Here i am sharing my experience in writing html form data to xml.
Create one html file in one location (D:\\HtmlToXml.html).
And open it with Internet Explorer.
Then after provide information and click on submit button, then one file is created in the same directory with name example.xml.
If once an xml is created, then next time onwards on submit button click data will append to same xml file.
<!DOCTYPE html>
<html>
<head>
<title>Display Emp Details</title>
<script type="text/javascript" language="javascript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME='D:\\example.xml';
function SaveXMLData()
{
validations();
}
function createfile()
{
var file;
var e1=document.getElementById('empName').value;
var p1=document.getElementById('empNumber').value;
var em1=document.getElementById('empEmail').value;
var d1=document.getElementById('empDate').value;
var tablemain = document.getElementById('tblmain');
if(fso.fileExists(FILENAME))
{
xmlDoc.load(FILENAME);
var lng;
lng=xmlDoc.getElementsByTagName("Details");
var xmlread= fso.OpenTextFile(FILENAME,1,true,0);
var x=xmlread.readAll();
var replace=x.replace('</Emp>','');
var sno=lng.length + 1;
file=fso.OpenTextFile(FILENAME,2,true);
file.writeLine(replace);
file.WriteLine('<Details category="'+sno+'">');
file.WriteLine('<SNo>'+sno+'</SNo>');
file.WriteLine('<Name>'+e1+'</Name>');
file.WriteLine('<PhoneNumber>'+p1+'</PhoneNumber>');
file.WriteLine('<Emailid>'+em1+'</Emailid>');
file.WriteLine('<Date>'+d1+'</Date>');
file.WriteLine('</Details>');
file.WriteLine('</Emp>');
alert('another file updated');
}
else
{
file= fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8" ?>');
file.WriteLine('<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>');
file.WriteLine('<Emp>');
file.WriteLine('<Details category="1">');
file.WriteLine('<SNo>'+1+'</SNo>');
file.WriteLine('<Name>'+e1+'</Name>');
file.WriteLine('<PhoneNumber>'+p1+'</PhoneNumber>');
file.WriteLine('<Emailid>'+em1+'</Emailid>');
file.WriteLine('<Date>'+d1+'</Date>');
file.WriteLine('</Details>');
file.WriteLine('</Emp>');
alert('file updated');
}
<!-- displayData();-->
document.getElementById('empName').value='';
document.getElementById('empNumber').value='';
document.getElementById('empEmail').value='';
document.getElementById('empDate').value='';
addRow('tablemain');
file.close();
}
function validations()
{
var emp1=document.getElementById('empName').value;
var letters = /^[\s A-Za-z]+$/;
if(emp1!="")
{
if(emp1.match(letters))
{
allnumeric();
}
else
{
alert('Please input alphabet characters only');
return false;
}
}
else
{
alert('Please Enter Name.');
}
}
<!--For checking Email-->
function checkemail()
{
var email = document.getElementById('empEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(email.value!="")
{
if (!filter.test(email.value))
{
alert('Please provide a valid email address');
return false;
}
else
{
DateValidation();
}
}
else
{
alert('Please Enter Email.');
}
}
<!--For checking Date Format-->
function DateValidation()
{
var date=/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{2,4}$/;
var empDate=document.getElementById("empDate");
if(empDate.value!="")
{
if(empDate.value.match(date))
{
createfile();
}
else
{
alert("Please provide valid date : DD-MM-YY(YYYY)");
return(false);
}
}
else
{
alert('Please Enter Date.');
}
}
<!--For checking phone number-->
function allnumeric()
{
var numbers=/^\d{10}$/;
var empNumber=document.getElementById("empNumber");
if(empNumber.value!="")
{
if(empNumber.value.length=="10")
{
if(empNumber.value.match(numbers))
{
checkemail();
}
else
{
alert("Phone number should be numeric");
return(false);
}
}
else
{
alert('Phone Number should be like: 9876543210');
}
}
else
{
alert('Please Enter Phone Number.');
}
}
function addRow(id)
{
if(fso.fileExists(FILENAME))
{
xmlDoc.load(FILENAME);
var x;
x=xmlDoc.getElementsByTagName("Details");
var table = document.getElementById('tbl');
var nxtbtn= document.getElementById("btnnext");
var prvbtn=document.getElementById("btnprev");
nxtbtn.disabled=true;
prvbtn.disabled=true;
if(x.length >5)
{
nxtbtn.disabled=false;
}
var j=0;k=5;
if(k>x.length)
{k=x.length;}
var store=document.getElementById("txtstore");
var maxval=document.getElementById("txtmax");
if(id=="btnprev")
{
if((store.value % k)==0)
{
store.value = store.value - k ;
if(store.value>0)
{
j = parseInt(store.value);
k += parseInt(store.value);
}
}
else
{
store.value =store.value - (store.value % k) ;
if(store.value >0)
{
j = store.value - k;
k = store.value;
}
}
if(j > 0)
{
prvbtn.disabled=false;
}
}
if(id=="btnnext")
{
if(store.value==0)
{
store.value=table.rows.length;
}
else if(store.value <0)
{
store.value=maxval.value;
}
prvbtn.disabled=false;
if(store.value >=k)
{
j +=parseInt(store.value);
k +=parseInt(store.value);
if(k >= x.length)
{
k=x.length;
nxtbtn.disabled = true;
prvbtn.disabled = false;
}
}
}
table.innerHTML = "";
var rowCount = 0;
for (i=j;i<k;i++)
{
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.id = "id2" ;
cell1.appendChild(element1);
// Create label
var label = document.createElement("label");
label.htmlFor = "id2" ;
cell1.appendChild(label);
var cell2 = row.insertCell(1);
cell2.innerHTML = x[i].getElementsByTagName("SNo")[0].childNodes[0].nodeValue;
var name = row.insertCell(2);
var elname =document.createElement("input");
elname.type = "text";
elname.readOnly=true;
elname.value=x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
name.appendChild(elname);
var phnno = row.insertCell(3);
var elphn =document.createElement("input");
elphn.type = "text";
elphn.readOnly=true;
elphn.value=x[i].getElementsByTagName("PhoneNumber")[0].childNodes[0].nodeValue;
phnno.appendChild(elphn);
var email = row.insertCell(4);
var elemail =document.createElement("input");
elemail.type = "text";
elemail.readOnly=true;
elemail.value=x[i].getElementsByTagName("Emailid")[0].childNodes[0].nodeValue;
email.appendChild(elemail);
var date = row.insertCell(5);
var eldate =document.createElement("input");
eldate.type = "text";
eldate.readOnly=true;
eldate.value=x[i].getElementsByTagName("Date")[0].childNodes[0].nodeValue;
date.appendChild(eldate);
rowCount +=1;
}
maxval.value=x[table.rows.length - 1].getElementsByTagName("SNo")[0].childNodes[0].nodeValue;
if(id=="btnprev")
{
store.value =store.value - 5;
}
else
{
store.value =parseInt(k);
}
}
}
</script>
</head>
<body onload="addRow('tbl')">
<form id="empForm" action="" method="get">
<p><b>Emp Registration:</b></p>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="empName" maxlength="25"/></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" id="empNumber" maxlength="10"/></td>
</tr>
<tr>
<td>EmailId:</td>
<td><input type="text" id="empEmail"/></td>
</tr>
<tr>
<td>Date:</td>
<td><input type="text" id="empDate" maxlength="10"/></td>
</tr>
<tr>
<td align="center">
<input type="button" value="Submit" onclick="SaveXMLData()"/></td>
<td>
<input type="button" value="Show Data" id="show" onclick="displayData(this.id)" style="display:none;"/></td>
</tr>
</table>
<!-- <table><tr><td><input type="button" onclick="displayData(this.id)" value="Prev" id="prev" disabled="disabled"></td>
<td><input type="button" onclick="displayData(this.id)" value="Next" id="next" disabled="disabled"></td></tr></table> -->
<div id='displaydatadiv'>
</div>
<!-- <INPUT type="button" value="Add Row" onclick="addRow('tbl')" /> -->
<div style="height: 135px; width:650px; background-color: Lavender;" >
<TABLE id="tbl" width="350px">
</TABLE>
</div>
<table id="tblmain" border="1" style="display:true" ></table>
<input type="button" id="btnprev" value="Prev" onclick="addRow(this.id)" disabled="disabled">
<input type="button" id="btnnext" value="Next" onclick="addRow(this.id)" disabled="disabled">
<input type="hidden" id="txtstore" style="display:none;">
<input type="hidden" id="txtmax" style="display:none;">
</body>
</html>