I am doing a simple client-side example using DOM in JScript. When the
user enter info and click on the submit button, it will then print the
value at the bottom of the page. However, I don't know what's wrong
that the entered values are not printed out. Can anyone please help
me??? Any reply is appreciated. My code is as follow, you can copy and
run it yourself.
File name: bookClient.htm
<html>
<head>
<title>Wrox Press book data entry page</title>
<body onload="initializeBook()" >
<h1>Wrox Press book data entry page</h1>
<h3>Book information:</h3>
<table>
<tr>
<td>Title:</td>
<td><input id="txtTitle"></input></td>
</tr>
<tr>
<td>Publisher:</td><td><input id="txtPublisher"></input></td>
</tr>
<tr>
<td>Published Date:</td><td><input id="txtPubDate"></input></td>
</tr>
<tr>
<td>Abstract:</td><td><input id="txtAbstract"></input></td>
</tr>
<tr>
<td>Pages:</td><td><input id="txtPages"></input></td>
</tr>
<tr>
<td>ISBN:</td><td><input id="txtISBN"></input></td>
</tr>
<tr>
<td>Price:</td><td><input id="txtPrice"></input></td>
</tr>
</table>
<input id="btnUpdate" type="button" value="Update book info"
onclick="updateBookInfo()"></input>
<h3>Authors:</h3>
<table>
<tr>
<td>Author:</td><td><input id="txtAuthor"></input></td>
</tr>
</table>
<input id="btnAddAuthor" type="button" value="Add author"
onclick="addAuthor()"></input>
<h3>Categories:</h3>
<table>
<tr>
<td>Category:</td><td><input id="txtCategory"></input></td>
</tr>
</table>
<input id="btnAddCategory" type="button" value="Add Category"
onclick="addCategory()"></input>
<xml id="docBook">
<book>
</book>
</xml>
<script>
var docBook;
function initializeBook()
{
docBook = document.all("docBook").XMLDocument;
docBook.async = "false";
renderElements();
}
function createOrReplaceElement(sElementName, sElementValue,
elementParent)
{
var elementItem;
var textValue;
var nodelistOldItem;
elementItem = docBook.createElement(sElementName);
textValue = docBook.createTextNode(sElementValue);
elementItem.appendChild(textValue);
nodelistOldItem = elementParent.getElementsByTagName(sElementName);
if (nodelistOldItem.length > 0)
{
elementParent.replaceChild(elementItem, nodelistOldItem.item(0));
}
else
{
elementParent.appendChild(elementItem);
}
}
function updateBookInfo()
{
createOrReplaceElement("Title", txtTitle.value,
docBook.documentElement);
createOrReplaceElement("Publisher", txtPublisher.value,
docBook.documentElement);
createOrReplaceElement("PubDate", txtPubDate.value,
docBook.documentElement);
createOrReplaceElement("Abstract", txtAbstract.value,
docBook.documentElement);
createOrReplaceElement("Pages", txtPages.value,
docBook.documentElement);
createOrReplaceElement("ISBN", txtISBN.value,
docBook.documentElement);
createOrReplaceElement("Price", txtPrice.value,
docBook.documentElement);
renderElements();
}
function addAuthor()
{
var elementAuthor;
var textAuthor;
var nodelistAuthors;
var elementAuthors;
elementAuthor = docBook.createElement("author");
textAuthor = docBook.createElement(txtAuthor.value);
elementAuthor.appendChild(textAuthor);
nodelistAuthors = docBook.getElementsByTagName("authors");
if (nodelistAuthors.length == 0)
{
elementAuthors = docBook.createElement("authors");
docBook.documentElement.appendChild(elementAuthors );
}
else
{
elementAuthors = nodelistAuthors.item(0);
}
elementAuthors.appendChild(elementAuthor);
renderElements();
}
function addCategory()
{
var elementCategory;
var textCategory;
var nodelistRecSubjCategories;
var elementRecSubjCategories;
elementCategory = docBook.createElement("category");
textCategory = docBook.createElement(txtCategory.value);
elementCategory.appendChild(textCategory);
nodelistRecSubjCategories =
docBook.getElementsByTagName("recSubjCategories");
if (nodelistRecSubjCategories.length == 0)
{
elementRecSubjCategories =
docBook.createElement("recSubjCategories");
docBook.documentElement.appendChild(elementRecSubj Categories);
}
else
{
elementRecSubjCategories = nodelistRecSubjCategories.item(0);
}
elementRecSubjCategories.appendChild(elementCatego ry);
renderElements();
}
function renderElements()
{
document.all("divRawXML").innerText = docBook.xml;
bookInfo.innerHTML = docBook.transformNode(bookXSL.documentElement);
authorTable.innerHTML =
docBook.transformNode(authorXSL.documentElement);
categoryTable.innerHTML =
docBook.transformNode(categoryXSL.documentElement) ;
}
</script>
<xml id="bookXSL">
<div xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:choose>
<xsl:when test="/book/title[. $ne$ '']">
<table border="0" cellpadding="1">
<tr>
<td>Title:</td>
<td><xsl:value-of select="/book/title"/></td>
</tr>
<tr>
<td>Publisher:</td>
<td><xsl:value-of select="/book/publisher"/></td>
</tr>
<tr>
<td>Published Date:</td>
<td><xsl:value-of select="/book/pubDate"/></td>
</tr>
<tr>
<td>Abstract:</td>
<td><xsl:value-of select="/book/abstract"/></td>
</tr>
<tr>
<td>Pages:</td>
<td><xsl:value-of select="/book/pages"/></td>
</tr>
<tr>
<td>ISBN:</td>
<td><xsl:value-of select="/book/isbn"/></td>
</tr>
<tr>
<td>Price:</td>
<td><xsl:value-of select="/book/price"/></td>
</tr>
</table>
</xsl:when>
<xsl:otherwise>
<p>Book Information not yet specified.</p>
</xsl:otherwise>
</xsl:choose>
</div>
</xml>
<xml id="authorXSL">
<div xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<table border="0" cellpadding="1">
<tr>
<td><strong>Authors</strong></td>
</tr>
<xsl:for-each select="/book/authors/author">
<tr>
<td><xsl:value-of select="text()"/></td>
</tr>
</xsl:for-each>
</table>
</div>
</xml>
<xml id="categoryXSL">
<div xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/category">
<table border="0" cellpadding="1">
<tr>
<td><strong>Categories</strong></td>
</tr>
<xsl:for-each select="category">
<tr>
<td><xsl:value-of select="category"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</div>
</xml>
<hr>
<h2>Book information</h2>
<p><div id="bookInfo"></div></p>
<p><div id="authorTable"></div></p>
<p><div id="categoryTable"></div></p>
</hr>
The text expression of the current contents of the DOM tree is:
<pre><div id="divRawXML"></div></pre>
</body>
</head>
</html>
