My form not working properly

Rubiconlwb · February 22, 2016

I have created an order form where users can place orders. Everything is working except for the number of items ordered is not being relayed as it should. Below is the appropriate code. When this is submitted, all data input such and name, address, e-mail address, etc. but I don't get the name of the item ordered or how many were ordered. Any suggestions?

<form action="formtoemailpro.php" method="post" onsubmit="return formCheck(this);">
<input type="hidden" name="Form" value="Papa's Order Form" />
<table width="700" border=4 bgcolor="black" cellpadding=5 cellspacing=0 style="box-shadow: 10px 10px 5px darkslategray;" summary="Main">
<tr><td>
<table border=4 width=100% bgcolor="tan" cellpadding=10>
<tr><td style="text-align:justify; font-size:16px;">If an item has a tan background, there is a photo associated with that item. To see a photo of any item, click the 'Photos' button in the menu above. I can customize any item I make by woodburning on the item (such as your name or your favorite team) for an additional charge of $2.00 per item. To order any item, enter your personal info below and then enter a quantity in one or more boxes and click 'Submit'. If any item indicates there are none 'On Hand', you can order that item but it will take more time to receive the item since I will have to make it before it is available. If you include a PayPal e-mail address, you are agreeing for me to charge your paypal account and I will send you an invoice via PayPal. If you don't have a PayPal account or want to pay by money order, I will e-mail you an invoice so you can send me a money order (no checks please). If you can pick up the item, you can avoid postage charges. If I have to mail it to you, I will charge exact postage.</td></tr>
</table>
<table width=100% border=4 bgcolor="deepskyblue" cellpadding=5 cellspacing=0>
<tr><td colspan=2>Name:</td><td colspan=3 align="right"><input name="name" size=40></td></tr>
<tr><td colspan=2>Address:</td><td colspan=3 align="right"><input name="address" size=40></td></tr>
<tr><td colspan=2>City/State:</td><td colspan=3 align="right"><input name="city/state" size=40></td></tr>
<tr><td colspan=2>Zip Code:</td><td colspan=3 align="right"><input name="zip" size=40></td></tr>
<tr><td colspan=2>Phone:</td><td colspan=3 align="right"><input name="phone" size=40></td></tr>
<tr><td colspan=2>E-mail:</td><td colspan=3 align="right"><input name="email" size=40></td></tr>
<tr align="center"><th width=50>#</th><th width=480>Description</th><th width=50>On Hand</th><th width=50>Price</th><th width=70>To Order</th></tr>

<script>
//PrintItem(number,photo,item,price,shortname);
for (i = 0; i < price.length; i++) {
if (category!=="") {
document.write("<tr><td colspan=5 align='center' style='background-color:gray;'>"+category+"</td></tr>");
}
PrintItem(onhand,photo,project,price);
document.write("<input name='"+name+"' size=2></td></tr>");
}

document.write("<tr style='background-color:lightblue;'><td colspan=2 style='text-align:right;'>Total items on hand:</td><td colspan=3 style='text-align:left;'>"+total+"</td></tr>");
</script>

<tr><td colspan=2>Text you want woodburned ($2.00 extra):</td><td colspan=3><input type="text" name="Woodburn text" size=39 /></td></tr>
<tr><td colspan=2>PayPal e-mail:</td><td colspan=3><input type="text" name="PayPal" size=39 /></td></tr>

<script>
if (coupon==1){
document.write("<tr><td colspan=2>Coupon:</td><td colspan=3><input type='text' name='Coupon' size=39 /></td></tr>");
}
</script>

<tr><td colspan=2>Comments:</td><td colspan=3><textarea name="Comment" rows="5" cols="30"></textarea></td></tr>
<tr align="left"><td colspan=2 valign="top">Security code:</td><td style="font-size:12px; text-align:center;" colspan=3><img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image"><a href="#" style="background:deepskyblue;" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false"><br>Reload Image</a></td></tr>
<tr align="left"><td colspan=2>Retype code:</td><td align="center" colspan=3><input type="text" name="captcha_code" size="25" maxlength="6"></td></tr>
<TR><td colspan=2> </td><TD ALIGN=CENTEr VALIGN=TOP colspan=3><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></TD></tr>
</table>
</td></tr>
</table>
</form>

dsonesuk · February 22, 2016

Function arguments are in wrong order, price is fourth in function, but in your function call its fifth.

Edit: no its not! looking what must have been old commented out function sorry.

Edited February 22, 2016 by dsonesuk

Rubiconlwb · February 22, 2016

So you don't see anything wrong with my code? Originally, I had the below included in the function but moved it out of the function thinking maybe that would help but it made no difference.

document.write("<input name='"+name+"' size=2></td></tr>");

As you can probably tell, I'm self taught in javascript and certainly not an expert but can usually figure out how to get things to work. This has me stumped!

davej · February 22, 2016

I don't see where the global variable total is declared and initialized to zero.

Rubiconlwb · February 23, 2016

I don't see where the global variable total is declared and initialized to zero.

That is included in the code for the page but has nothing to do with the form operation so I did not include it. Would it be helpful if I included the entire code for the page? I'm pretty much stumped because the page presents well on the webpage and all other entries are sent via the formtoemailpro.php program to my e-mail address except for the information pertaining to any items ordered.

Here is the variable declaration section:

var header="Papa's Order Page";

var notoc=0;

var fontnumber=0; //font number of page header

var countfile="suorder"; //used for page counter

var showaddbookmark=1; //if 1 then print note about bookmarking

var coupon=1; //Change this to 1 to present alert about using a coupon

var counter=1;

var pictures=1;

var total=0;

davej · February 23, 2016

Where do you declare i?

Are you checking the browser console for any other errors?

This example page seems to generate a total...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>title</title>
<style>
</style>
<script>
window.onerror = function(a,b,c){
alert('Javascript Error: '+a+'\nURL: '+b+'\nLine Number: '+c);
return true;
}
</script>
<script>
'use strict';
function PrintItem(number,photo,item,price) {
    var formatprice="$"+price+".00"
    if(photo===1){
        document.write("<tr style='background-color:tan;'>");
    }
    else{
        document.write("<tr style='background-color:deepskyblue;'>");
    }
    document.write("<td>"+counter+"</td><td>"+item+"</td><td>"+number+"</td><td align='right'>"+formatprice+"</td>");
    if(number>0){
        document.write("<td align='right'>Buy:");
    }
    else{
        document.write("<td align='right'>Order:");
    }
    counter++;
    total=total+number;
	//alert('running total:' + total);
}
</script>
</head>

<body>
 
<form action="" method="post" onsubmit="return formCheck(this);">
    <input type="hidden" name="Form" value="Papa's Order Form" />
    <table width="700" border=4 bgcolor="black" cellpadding=5 cellspacing=0 style="box-shadow: 10px 10px 5px darkslategray;" summary="Main">
        <tr><td>
        <table border=4 width=100% bgcolor="tan" cellpadding=10>
            <tr><td style="text-align:justify; font-size:16px;">If an item has a tan background, there is a photo associated with that item.  To see a photo of any item, click the 'Photos' button in the menu above.  I can customize any item I make by woodburning on the item (such as your name or your favorite team) for an additional charge of $2.00 per item.  To order any item, enter your personal info below and then enter a quantity in one or more boxes and click 'Submit'.  If any item indicates there are none 'On Hand', you can order that item but it will take more time to receive the item since I will have to make it before it is available.  If you include a PayPal e-mail address, you are agreeing for me to charge your paypal account and I will send you an invoice via PayPal.  If you don't have a PayPal account or want to pay by money order, I will e-mail you an invoice so you can send me a money order (no checks please).  If you can pick up the item, you can avoid postage charges.  If I have to mail it to you, I will charge exact postage.</td></tr>
        </table>
        <table width=100% border=4 bgcolor="deepskyblue" cellpadding=5 cellspacing=0>            
            <tr><td colspan=2>Name:</td><td colspan=3 align="right"><input name="name" size=40></td></tr>
            <tr><td colspan=2>Address:</td><td colspan=3 align="right"><input name="address" size=40></td></tr>
            <tr><td colspan=2>City/State:</td><td colspan=3 align="right"><input name="city/state" size=40></td></tr>
            <tr><td colspan=2>Zip Code:</td><td colspan=3 align="right"><input name="zip" size=40></td></tr>
            <tr><td colspan=2>Phone:</td><td colspan=3 align="right"><input name="phone" size=40></td></tr>
            <tr><td colspan=2>E-mail:</td><td colspan=3 align="right"><input name="email" size=40></td></tr>
            <tr align="center"><th width=50>#</th><th width=480>Description</th><th width=50>On Hand</th><th width=50>Price</th><th width=70>To Order</th></tr>
            
            <script>
			'use strict';

			var header="Papa's Order Page";
			var notoc=0;  
			var fontnumber=0;                   //font number of page header
			var countfile="suorder";            //used for page counter
			var showaddbookmark=1;       	 	//if 1 then print note about bookmarking
			var coupon=1;                       //Change this to 1 to present alert about using a coupon
			var counter=1;
			var pictures=1;
			var total=0;
			/**/
			var category = ['cat1','cat2','cat3'];
			var name = ['name1','name2','name3'];
			var onhand = [1,2,3];
			var photo = ['photo1','photo2','photo3'];
			var project = ['proj1','proj2','proj3'];
			var price = [22,33,44];
			//var total = 0;
			var coupon = "";
			var i;
			/**/
            //PrintItem(number,photo,item,price,shortname);
            for (i = 0; i < price.length; i++) {
                if (category[i]!=="") {
                    document.write("<tr><td colspan=5 align='center' style='background-color:gray;'>"+category[i]+"</td></tr>");
                }
                PrintItem(onhand[i],photo[i],project[i],price[i]);
                document.write("<input name='"+name[i]+"' size=2></td></tr>");/* the qty field */
            }
            
            document.write("<tr style='background-color:lightblue;'><td colspan=2 style='text-align:right;'>Total items on hand:</td><td colspan=3 style='text-align:left;'>"+total+"</td></tr>");
            </script>
            
            <tr><td colspan=2>Text you want woodburned ($2.00 extra):</td><td colspan=3><input type="text" name="Woodburn text" size=39 /></td></tr>
            <tr><td colspan=2>PayPal e-mail:</td><td colspan=3><input type="text" name="PayPal" size=39 /></td></tr>
            
            <script>
                if (coupon==1){
                    document.write("<tr><td colspan=2>Coupon:</td><td colspan=3><input type='text' name='Coupon' size=39 /></td></tr>");
                }
            </script>
            
            
            <tr><td colspan=2>Comments:</td><td colspan=3><textarea name="Comment" rows="5" cols="30"></textarea></td></tr>
            <tr align="left"><td colspan=2 valign="top">Security code:</td><td style="font-size:12px; text-align:center;" colspan=3><img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image"><a href="#" style="background:deepskyblue;" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false"><br>Reload Image</a></td></tr>
            <tr align="left"><td colspan=2>Retype    code:</td><td align="center" colspan=3><input type="text" name="captcha_code" size="25" maxlength="6"></td></tr>
            <TR><td colspan=2> </td><TD ALIGN=CENTEr VALIGN=TOP colspan=3><input type="submit" value="Submit" />   <input type="reset" value="Reset" /></TD></tr>                
        </table>
        </td></tr>
    </table>
    </form>

</body>    
</html>

Rubiconlwb · February 23, 2016

Where do you declare i?

Are you checking the browser console for any other errors?

This example page seems to generate a total...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>title</title>
<style>
</style>
<script>
window.onerror = function(a,b,c){
alert('Javascript Error: '+a+'\nURL: '+b+'\nLine Number: '+c);
return true;
}
</script>
<script>
'use strict';
function PrintItem(number,photo,item,price) {
    var formatprice="$"+price+".00"
    if(photo===1){
        document.write("<tr style='background-color:tan;'>");
    }
    else{
        document.write("<tr style='background-color:deepskyblue;'>");
    }
    document.write("<td>"+counter+"</td><td>"+item+"</td><td>"+number+"</td><td align='right'>"+formatprice+"</td>");
    if(number>0){
        document.write("<td align='right'>Buy:");
    }
    else{
        document.write("<td align='right'>Order:");
    }
    counter++;
    total=total+number;
	//alert('running total:' + total);
}
</script>
</head>

<body>
 
<form action="" method="post" onsubmit="return formCheck(this);">
    <input type="hidden" name="Form" value="Papa's Order Form" />
    <table width="700" border=4 bgcolor="black" cellpadding=5 cellspacing=0 style="box-shadow: 10px 10px 5px darkslategray;" summary="Main">
        <tr><td>
        <table border=4 width=100% bgcolor="tan" cellpadding=10>
            <tr><td style="text-align:justify; font-size:16px;">If an item has a tan background, there is a photo associated with that item.  To see a photo of any item, click the 'Photos' button in the menu above.  I can customize any item I make by woodburning on the item (such as your name or your favorite team) for an additional charge of $2.00 per item.  To order any item, enter your personal info below and then enter a quantity in one or more boxes and click 'Submit'.  If any item indicates there are none 'On Hand', you can order that item but it will take more time to receive the item since I will have to make it before it is available.  If you include a PayPal e-mail address, you are agreeing for me to charge your paypal account and I will send you an invoice via PayPal.  If you don't have a PayPal account or want to pay by money order, I will e-mail you an invoice so you can send me a money order (no checks please).  If you can pick up the item, you can avoid postage charges.  If I have to mail it to you, I will charge exact postage.</td></tr>
        </table>
        <table width=100% border=4 bgcolor="deepskyblue" cellpadding=5 cellspacing=0>            
            <tr><td colspan=2>Name:</td><td colspan=3 align="right"><input name="name" size=40></td></tr>
            <tr><td colspan=2>Address:</td><td colspan=3 align="right"><input name="address" size=40></td></tr>
            <tr><td colspan=2>City/State:</td><td colspan=3 align="right"><input name="city/state" size=40></td></tr>
            <tr><td colspan=2>Zip Code:</td><td colspan=3 align="right"><input name="zip" size=40></td></tr>
            <tr><td colspan=2>Phone:</td><td colspan=3 align="right"><input name="phone" size=40></td></tr>
            <tr><td colspan=2>E-mail:</td><td colspan=3 align="right"><input name="email" size=40></td></tr>
            <tr align="center"><th width=50>#</th><th width=480>Description</th><th width=50>On Hand</th><th width=50>Price</th><th width=70>To Order</th></tr>
            
            <script>
			'use strict';

			var header="Papa's Order Page";
			var notoc=0;  
			var fontnumber=0;                   //font number of page header
			var countfile="suorder";            //used for page counter
			var showaddbookmark=1;       	 	//if 1 then print note about bookmarking
			var coupon=1;                       //Change this to 1 to present alert about using a coupon
			var counter=1;
			var pictures=1;
			var total=0;
			/**/
			var category = ['cat1','cat2','cat3'];
			var name = ['name1','name2','name3'];
			var onhand = [1,2,3];
			var photo = ['photo1','photo2','photo3'];
			var project = ['proj1','proj2','proj3'];
			var price = [22,33,44];
			//var total = 0;
			var coupon = "";
			var i;
			/**/
            //PrintItem(number,photo,item,price,shortname);
            for (i = 0; i < price.length; i++) {
                if (category[i]!=="") {
                    document.write("<tr><td colspan=5 align='center' style='background-color:gray;'>"+category[i]+"</td></tr>");
                }
                PrintItem(onhand[i],photo[i],project[i],price[i]);
                document.write("<input name='"+name[i]+"' size=2></td></tr>");/* the qty field */
            }
            
            document.write("<tr style='background-color:lightblue;'><td colspan=2 style='text-align:right;'>Total items on hand:</td><td colspan=3 style='text-align:left;'>"+total+"</td></tr>");
            </script>
            
            <tr><td colspan=2>Text you want woodburned ($2.00 extra):</td><td colspan=3><input type="text" name="Woodburn text" size=39 /></td></tr>
            <tr><td colspan=2>PayPal e-mail:</td><td colspan=3><input type="text" name="PayPal" size=39 /></td></tr>
            
            <script>
                if (coupon==1){
                    document.write("<tr><td colspan=2>Coupon:</td><td colspan=3><input type='text' name='Coupon' size=39 /></td></tr>");
                }
            </script>
            
            
            <tr><td colspan=2>Comments:</td><td colspan=3><textarea name="Comment" rows="5" cols="30"></textarea></td></tr>
            <tr align="left"><td colspan=2 valign="top">Security code:</td><td style="font-size:12px; text-align:center;" colspan=3><img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image"><a href="#" style="background:deepskyblue;" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false"><br>Reload Image</a></td></tr>
            <tr align="left"><td colspan=2>Retype    code:</td><td align="center" colspan=3><input type="text" name="captcha_code" size="25" maxlength="6"></td></tr>
            <TR><td colspan=2> </td><TD ALIGN=CENTEr VALIGN=TOP colspan=3><input type="submit" value="Submit" />   <input type="reset" value="Reset" /></TD></tr>                
        </table>
        </td></tr>
    </table>
    </form>

</body>    
</html>

The problem is not generating a total, the code does that fine. The problem is that when I fill out the form, putting a number in one or more boxes on the form indicating I want to order that item, I receive the order just fine. All the information submitted is sent as well but it does not send the name of the item nor the number ordered. The part that should take care of sending that data is the ...document.write("<input name='"+name[i]+"' size=2></td></tr>");/* the qty field */... Also, I created a .ssi file than contains all the data on the arrays and use an include such as  to bring that into the code

Here is a link to the page in question: http://sawdustunlimited.net/order.shtml

Edited February 23, 2016 by Rubiconlwb

Rubiconlwb · February 23, 2016

I experimented with this code long enough that I solved my own problem! I don't know what was wrong but I eventually removed the function and transferred to code from the function into the loop in the body of the page and it worked! I must have been using a variable that had not been defined or something but at any rate the form is working the way I want it to. Thanks so much for attempting to assist in my frustrating problem!

davej · February 23, 2016

Well, I would suggest that you try to clean up the problems that the w3c validator complains about...

https://validator.w3.org/

I might also suggest that you use 'strict mode' in your code...

http://www.w3schools.com/js/js_strict.asp

dsonesuk · February 23, 2016

I personally would steer away from using document.write().

Rubiconlwb · February 24, 2016

Well, I would suggest that you try to clean up the problems that the w3c validator complains about...

https://validator.w3.org/

I might also suggest that you use 'strict mode' in your code...

http://www.w3schools.com/js/js_strict.asp

I will try to clean the code up using the validator. I don't know what you mean by 'strict' code so will go check it out using your link. Thanks for you help. As you can probably tell, I am completely self-taught so I'm sure I do a lot of things much more tediously than one who does this professionally or at least has some academic training.

Rubiconlwb · February 24, 2016

I personally would steer away from using document.write().

What command would I use other than document.write()? I'm always trying to learn better ways of doing things.

davej · February 24, 2016

document.write() is destructive. There are various other methods that are not destructive. For example see .innerHTML.

Ingolme · February 24, 2016

There are two ways to put content on the page aside from document.write().

First, innerHTML, as mentioned before. It adds HTML code between the opening and closing tags of a particular elements.

The second way is using the DOM. The DOM is a Javascript data structure that retrieves, adds, removes and manipulates elements on the page individually. Read the tutorial here: http://www.w3schools.com/js/js_htmldom.asp

If you want to know why document.write() is a problem: Any time you call document.write() after the page has finished loading, everything on the page will be removed and replaced with the content you have give to document.write().

ShadowMage · February 26, 2016

First, innerHTML, as mentioned before. It adds HTML code between the opening and closing tags of a particular elements.

The second way is using the DOM. The DOM is a Javascript data structure that retrieves, adds, removes and manipulates elements on the page individually.

Aren't those technically the same since innerHTML is part of the DOM?

Ingolme · February 26, 2016

Aren't those technically the same since innerHTML is part of the DOM?

I consider it different, because when you use the innerHTML property you're not actually creating and adding DOM objects, you're just passing a string to the parser and letting it create the DOM instead.

My form not working properly

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in