How to fetch data from XML file into combo-boxes using javascript based on DOM API

I have XML file with name "mobiles.xml"; The XML file looks like;

Expand|Select|Wrap|Line Numbers

 <mobiles>
 
<brand name="Nokia">

<model>Lumia 720</model>

<price>Rs. 27,600</price>
 
<model>Lumia 510</model>

<price>Rs. 15,300</price>
 
<model>Asha 303</model>

<price>Rs. 12,900</price>
 
<model>X2 05</model>

<price>Rs. 5,550</price>

</brand>
 
<brand name="Samsung">

<model>Galaxy Mega 5.8</model>

<price>Rs. 42,000</price>
 
<model>S5610</model>

<price>Rs. 10,000</price>
 
<model>E1207</model>

<price>Rs. 2,000</price>
 
<model>E1205</model>

<price>Rs. 1,700</price>

</brand>
 
<brand name="Sony">

<model>Xperia ZL</model>

<price>48,000</price>
 
<model>Xperia J</model>

<price>Rs. 18,000</price>
 
<model>Xperia miro</model>

<price>Rs. 16,000</price>
 
<model>Xperia Tipo Dual</model>

<price>Rs. 12,000</price>

</brand>
 
</mobiles>

Actually I want to retrieve data from XML file through javascript which is DOM based (node based) but I don't know how to do it. I want to retrieve data from XML file into combo-boxes (dropdown lists)... For example, I have to fetch the data of "brand" from XML file in combo-box. When i select the particular brand the values of "models" should be loaded from XML file into another combo-box. Now I have 3rd element price in XML File. I want to display the price in textbox of a particular mobile based on selected values of combo-boxes "Brand" & "Models" after hitting Submit button. How will I do this? Please don't use built-in functions. I want to learn how to do it based on DOM API and Javascript. It will be nice if you people also tell me how to add and save data of new brands, their models and price through textboxes into XML file? I have worked on it and I can load values in combo-boxes but I want to display the price of particular item based on combo-box selection in textbox.

I have fetch the data in 2 combo-boxes from XML file and code looks like;

Expand|Select|Wrap|Line Numbers

 <html>

<head>
 
<script language="javascript">

/* Cross-Browser Import of XML document into a XML Document. */

function importXML(xmlfile) {

    var xmlDoc;

    if (typeof window.ActiveXObject != 'undefined') {

        //code for IE

        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

        xmlDoc.async = false;

        xmlDoc.load(xmlfile);

        } else {

            try {

                // code for IE7+, Firefox, Chrome, Opera, Safari

                xmlhttp=new XMLHttpRequest();

                xmlhttp.open("GET", xmlfile, false);

                xmlhttp.setRequestHeader('Content-Type', 'text/xml');

                xmlhttp.send();

                xmlDoc=xmlhttp.responseXML;

            } catch (Exception) {

                alert("Your browser is not supported. Try firefox !!");

            }

        }

    return xmlDoc;

}
 
/* Get the options for the model combobox from the XML. */

function loadXMLOption() {

    // Load the xml file

    var xmlDoc=importXML("mobiles.xml");

    xmlObj=xmlDoc.documentElement;

    // Get all Elements with Tag name 'brand'

    BrandObj = xmlObj.getElementsByTagName("brand");

    for(var i=0; i < BrandObj.length; i++) {

        // Loop through each brand tag and check if its name is equal to the selected brand value

        if (document.getElementById('Company').value == BrandObj[i].getAttribute("name")) {  

            // If matching brand found get the model tags under that brand

            modelObj = BrandObj[i].getElementsByTagName("model");

            document.getElementById('Model').options.length = 0;

            // Create options for the Model comboBox.

            for(var j=0; j < modelObj.length; j++) {

                var opt = document.createElement('option');

                opt.value = modelObj[j].firstChild.nodeValue;

                opt.text = modelObj[j].firstChild.nodeValue;

                document.getElementById('Model').options.add(opt);      }     }     } }

</script>

</head>

<body>

<h2>Chained Drop-Down - using XML</h2>

Brand : <select id="Company" onchange="loadXMLOption();">

  <option value=""></option> 

  <option value="Nokia">Nokia</option>

  <option value="Samsung">Samsung</option> 

  <option value="Sony">Sony</option>

</select>

Model : <select id="Model"> </select>

</body></html>

Now I want to get the value of price against particular item selected in comboboxes in textbox. How will I do it?

Jan 7 '14 #1

Subscribe Post Reply

1748

by: Sergio Otoya | last post by:

Hi all, Is there any way of copying a file using javascript, not using the Filesystemobject (ActiveX). I need this to run in Windows and MACS. Any help would be greatly appreciated. Thanks...

Javascript

Validating file tag using javascript

by: guitarsajee | last post by:

hi.. i want to know how to validate file tag using javascript... plz let me know soon as possible.. thanx...

HTML / CSS

file operations using javascript

by: mitchell | last post by:

hi i was trying to delete a file in a javascript function but couldn't do it. myActiveXObject = new ActiveXObject("Scripting.FileSystemObject"); file =...

Javascript

save data in excel using javascript

by: ranjiths | last post by:

hi, i am trying to export data to excel from html using javascript, but i am getting an error as it opens saveas window. Please do the needful

Javascript

Check File Size using JavaScript

by: Frinavale | last post by:

Hi there! I'm hoping that someone knows how to check the size of a file before it is uploaded to the server using JavaScript. I have seen suggested solutions using an ActiveX control to check...

Javascript

not able to compare & fetch data from table using where clause

by: rahullko05 | last post by:

Hi, i am building a small forum site as my final year project & stuck in a very trivial problem. I have a table which are varchar type of data & i am trying to fetch data from table based on...

PHP

Fetch data from DB2 using INNER JOIN with access file

by: Aditya jha | last post by:

Hi, I want to fetch data from DB2 using INNER JOIN with access file, Is it possible. If yes then how?.

DB2 Database

how to store server fetched data in array using JavaScript and HTML?

by: satishpatil14 | last post by:

how to store server fetched data in array using JavaScript and HTML? please give reply to this.Thanks in Advance

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

How to fetch data from XML file into combo-boxes using javascript based on DOM API

Similar topics