user4833410 user4833410 - 2 years ago 65
Javascript Question

having hard time with Ajax using javacript

Im trying to print the Book title , price and date from in xml file with ajax using javascript. I spend almost two days on it and watched some video on youtube to figure it out i could not .I do not know where im doing wrong if You could help me with it you making my day .Thank you .

$(document).ready(function() {
$("#find").click(function() {
var book = $("#book").val();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.status == 200) {
document.getElementById('forPrice').innerHTML = 'Test1';
var i;
var xmlDoc = xhttp.responseXML;
var x = xmlDoc.getElementsByTagName("book");
for (i = 0; i < x.length; i++) {
catalog + = xmlDoc[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);

};"POST", "books.xml", true);


<?xml version="1.0"?>
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<description>An in-depth look at creating applications
with XML.</description>
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
<author>Corets, Eva</author>
<title>Oberon's Legacy</title>
<description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<description>An anthology of horror stories about roaches,
centipedes, scorpions and other insects.</description>

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<style type="text/css">
td {
border: 1px solid black;
<script src="jquery-1.11.2.js"></script>

<script src="p3.js"></script>


<h2>Book Price</h2>
<form action="" method="post">
<select name="book" id="book">
<option value="XML Developer's Guide">XML Developer's Guide</option>
<option value="Midnight Rain">Midnight Rain</option>
<option value="Oberon's Legacy">Oberon's Legacy</option>
<option value="Splish Splash">Splish Splash</option>
<option value="Creepy Crawlies">Creepy Crawlies</option>
Select a book to see the price
<input type="button" id="find" value="Find!">
<div id="forPrice"></div>

<h2>Author Names and Book Titles</h2>
<div id="forBookInformation"></div>

<h2>Book Publish Date</h2>
<div id="forPublishDate"></div>



ajax using javascript. I spend almost two days on it and watched some video on youtube to figure it out i could not .I do not know where im doing wrong if You could help me with it you making my day .Thank you .

Answer Source

There are many things wrong with your code. Let me explain where and what:

  • I changed "POST" to "GET""GET", "books.xml", true);
  • document.getElementsById is wrong, since there is only one id, it should be: document.getElementById
  • had you use jQuery the syntax would be $('#forPrice') but since you use native JS, you must omit #, i.e. document.getElementById('forPrice') -> note the lack of #
  • since you use native JS (and not jQuery), innerHTML is a property and you need to use it as such (i.e. not .innerHTML('text') but .innerHTML = 'text' )
  • using just one variable in concatenating it will just add text to one value.. so I changed from catalog to specific values (you can revert this change if you feel like it).
  • there were a lot of ) that are not allowed.

All in all, what I changed is not totally correct, but at least the data gets loaded. However, since you do not check what has been selected from the select-option element, the data gets overwritten.

Hope this helps you get going on the right direction!

Here's the link to the working example.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download