Re: Forms with AJAX

•

•

•

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 401,971 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,857 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Forms with AJAX

•

•

Join Date: Mar 2007

Posts: 42

Reputation: toadzky is an unknown quantity at this point

toadzky is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

toadzky is offline

Offline

Light Poster

Re: Forms with AJAX

#3

Mar 5th, 2008

Here are the relevant JavaScript functions. The tables in the HTML files load just fine.
[code]
//Sets up the page
function initialize()
{
getInventory(document.getElementById("weapons"), "Store/weapons.html");
getInventory(document.getElementById("jewelry"), "Store/jewelry.html");
getInventory(document.getElementById("misc"), "Store/misc.html");

Help with Code Tags

(Toggle Plain Text)

	
	updateTotal();
}

//Quick check for AJAX functionality. Copied from w3schools.com
function MakeXMLReq()
{
	var xmlHttp = null;
	
	try
	{
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		// Internet Explorer 6+
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			//For IE 5.5 Users
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	return xmlHttp;
}

function getInventory(loc, file)
{
	var xhr = MakeXMLReq();
	
	if (xhr == null)
	{
		alert("Your browser does not support AJAX. Please join us in the 21<sup>st</sup> Century.");
		return;
	}
	
	xhr.onreadystatechange = function ()
	{
		if(xhr.readyState==4)
		{
			loc.innerHTML = xhr.responseText;
		}
	}
		
	xhr.open("GET", file,true);
	xhr.send(null);
}

//Calcuates customer total based on the input of the various text fields.
function updateTotal()
{	
	var totalPrice = 0.00;
	var totalBox = document.getElementById("total");
	
	var items = document.store.elements;

	for (var i in items)
	{
		if (items[i].type != "text")
			continue;
		else if (items[i].id == "total")
			break;
		else if (items[i].value == "")
			continue;
			
		var howMany = items[i].value * 1;
		var price = document.getElementById(items[i].id + "_price").innerHTML.slice(1);
		totalPrice += (howMany * price);
		
	}
	totalBox.value = "$" + totalPrice.toFixed(2);
}

function printElements(form)
{
	var output;
	for (var x in form.elements)
	{
		output += x.name + "=" + x.value + "&";
	}
	document.getElementsByName("query").value = output;
}

And here is the HTML for the main page. Without the style stuff it will probably look weird, but here you go.

Help with Code Tags

(Toggle Plain Text)

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "HTTP://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml">

<head> 
	<title>Assingment 10 - Store with Perl</title>
    <link rel = "stylesheet" type = "text/css" href = "StyleSheets/army_theme.css" />
	<script type="text/javascript" src = "JavaScript/assign10.js"></script> 

</head> 

<body onload="initialize();"> 

<div class = "main">

	<h1 class = "text-center" id = "top">The Store</h1>
    <hr />
    
    <div class = "text-center center" style = "width: 75%">
        <a class = "internal" href = "#weaponHead">Weapons</a>
        <a class = "internal" style = "margin-left: 20%; margin-right: 20%" href = "#jewelHead">Jewelry</a>
        <a class = "internal" href = "#miscHead">Misc.</a>
    </div>
    <hr />

	<form id = "store" name = "store" class = "center" method = "get" action = "" onsubmit = "printElements(this);">
    <a id = "weaponHead" />
    	<div id = "weapons" class = "smallerCentered"></div><a id = "jewelHead" class = "internal" href = "#top">Top of Page</a><hr />
        <div id = "jewelry" class = "smallerCentered"></div><a id = "miscHead" class = "internal" href = "#top">Top of Page</a><hr />
        <div id = "misc" class = "smallerCentered"></div><a class = "internal" href = "#top">Top of Page</a>
        <hr />
        <div class = "center" style = "width: 300px">
            Total:
            <input type = "text" class = "text-center" value = "$0.00" id = "total" readonly = "readonly" />
            <input type = "button" class = "text-center" value = "Empty Cart" id = "empty" onclick = "clearCart()" style = "padding: 5px;" />
        </div>
        <input type = "text" style = "display: none" name = "query" />
        <hr />
        <div class = "smallerCentered"><input type = "submit" value = "Checkout" style = "padding: 10px;" /></div>
    </form>
    </div>

</div>

</body> 

</html>

Reply With Quote

Forum Highlights

Related Features

DANIWEB FEATURE INDEX

Advertisement

Statistics

Members: 401,971

Users Online Now: 2,857

Active IRC Users: 26

Forum Threads: 130,533

Forum Posts: 668,186

Code Snippets: 888

Blogs: 146

Blog Entries: 2,140

Directory Links: 568