Member Avatar for toadzky

I am trying to do a store page for my class. I have a perl script that generates simple HTML tables. The store pages uses ajax to load the tables into the form.

The form has all the elements, but when I submit, there query string is empty. I tried doing a javascript alert debug, printing out the ids, names, or types of all the form's elements, but it just gave me undefineds for everything.

The query string is supposed to post to a perl script that processes it.

Any help would be appreciated.

Thanks.

  • 2 Contributors
  • 4 Replies
  • 76 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by toadzky
Member Avatar for DangerDev

can you post your client side code ?

Member Avatar for toadzky

Here are the relevant JavaScript functions. The tables in the HTML files load just fine.

//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");
    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.

<?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>
Edited by mike_2000_17 because: Fixed formatting
Member Avatar for DangerDev

hi
try this loop:

for(var ctr=0;ctr<form.elements.length;ctr++)
	{
		x=form.elements[ctr];
		output += x.name + "=" + x.value + "&"+"id="+x.id;
	}
Member Avatar for toadzky

Thanks. That fixed it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.