Dynamically created form...onSubmit not working 1

[Sarah555]

I have dynamically created a form based on the value of the cookie. Unfortunately my onSubmit() does not work. I have placed a very brief synapse of the code below for just the creation of the form.

function JingleOrdered(numjingledress)
{

document.write(&quot;<FORM ACTION=\&quot;mailto:loretta.stone@sympatico.ca\&quot; METHOD=\&quot;POST\&quot; enctype=\&quot;text/plain\&quot; onSubmit=\&quot;return Calculate();\&quot;>&quot;);
	
for (var i = 0; i <= 27; i++)
{                          
			
document.write(&quot;<TR>&quot;);
document.write(&quot;<TD>&quot;);
document.write(&quot;<INPUT TYPE=\&quot;RADIO\&quot; onClick=\&quot;\&quot; NAME=&quot; + jdname + &quot;VALUE=&quot; + jdcolourValue[i] + &quot;>&quot;);
document.write(colour[i]);
document.write(&quot;</TD>&quot;);
etc.  //etc. not in code but function is quite lengthy.
}
document.write(&quot;<center><INPUT TYPE=\&quot;SUBMIT\&quot; VALUE=\&quot;Submit Order\&quot;></center>&quot;);
document.write(&quot;</FORM>&quot;);
return null;

I need to know how to make the onSubmit function work when enclosed by document.write statements. All help is appreciated.

 

[rac2]

The FORM tag looks OK to me. Does the Calculate() function return true?


I pasted your code into a page and the onsubmit threatened to send an email when Calculate() returned true and did nothing when Calculate() returned false. So maybe it is not the string you are writing.

By the way you can use single quotes inside double quotes instead of \". Might be easier to code and read.

document.write(&quot;<FORM ACTION='mailto:loretta.stone@sympatico.ca' METHOD='POST' enctype='text/plain' onSubmit='return Calculate();'>&quot;);

 

[Sarah555]

The calculate function returns true. The problem is that I never get to the calculate function. I have put an alert inside that never runs. Here is the code for the calculate function:

function Calculate()
{	
var cost = 0;
eval("alert('You are in the Calculate Function')");


for (a=0; a < document.getElementById('jdage' + a).length; a++);
{
if (document.getElementById('jdage' + a).checked)
{
 if (document.getElementById('jdage' + a).value == &quot;toddler&quot;)
 {
  cost = cost + 75.00;
  eval(&quot;alert('The value of cost is:  ' + cost)&quot;);
 }
 else if (document.getElementById('jdage' + a).value == &quot;youth&quot;)
 {
  cost = cost + 165.00;
  eval(&quot;alert('The value of cost is:  ' + cost)&quot;);
 }
 else if (document.getElementById('jdage' + a).value == &quot;adult&quot;)
 {
  cost = cost + 300.00;
  eval(&quot;alert('The value of cost is:  ' + cost)&quot;);
 }
  else
 {
  cost = cost + 0;
 }
}
}
return true;
}

I am unsure if this will help. I can get the onSubmit() to work without the document.write statement but as soon as I put it in the document.write statement it does not work. I am using IE 6 and NN 7. I appreciate the tip about the single quotes. It certainly would make it easier to read.

 

[rac2]

Try viewing source in your browser after loading the page instead of looking at the source code.

 

[SafariTECHPhoenix]

Are you sure it is not running?


I have noticed that both MSIE 6 and NN6/7 will not produce a noticeable error if something is wrong - they just continue on their merry way and ignore the error.

The function may actually being called but an error occurs making it ignore the script.

I am not certain if this is related, but why are you using alerts in eval statements? There is nothing to evaluate - you can create a dynamic alert just by joining solid output with variables as you have already coded in them.

What I do in these cases is comment all the lines of my code and end the function with "return false;" so it never actually submits, just processes the validation, that way I can keep running it over and over again.

Then uncomment 1 line at a time to see if it works up to a certain point. The first thing I would do is comment everything out (in Calculate()) and add an alert at the very start that says "function accessed" - do not use eval.

If this is the only command in the script and the onsubmit is working, you will get the alert to show. If you do - you know it is the browsers ignoring the errors and bypassing the script.


Just my 2 cents,

Glen Palmer
SafariTECH
"because it's a jungle out there!"

 

[Sarah555]

Hi rac2 and SafariTECH,

rac2 - I took your advice and the source code after the page loads and it looks fine. I do not see any errors.

SafariTECH - I took your advice and eliminated the eval portion of the alert as well as commenting out everything except the alert and I still do not get into the calculate function.

This is why I am convince that there is something wrong with getting the onSubmit command to fire. But I do not know what the problem is. I placed an alert in the onSubmit command and it does not pop up. I have no clue what I am doing wrong. All help is truly appreciated!

 

[rac2]

OK. Can you give us the URL?

 

[Sarah555]

Sure. Not a problem. This is the link:

http://www24.brinkster.com/lorettastone/ShoppingCart/index.html

Go to the link to Jingle Dress and order a Jingle Dress then click review order. The order form will present based on how many you order. At the bottom is the submit button. The calculate function is based on the last three radio buttons....toddler, youth and adult.....and calculates the cost based on the radio button selected. Thanks rac2! This shopping cart is being designed for someone with a disability trying to start a business. I am receiving no financial compensation for my efforts. Just the satisfaction of helping someone trying to help themself. That is why I appreciate your help so much.

 

[palbano]

Sarah,

You have one <FORM> and many </FORM> so your submit button is not within the actual form.

Hope this helps.
-pete

 

[Sarah555]

Thank-you palbano!!! I have been banging my head on this one for almost two weeks. I guess I need a new pair of eyes.

 

[Sarah555]

I forgot to mention in the last post that the form will now submit but it will not access the calculate function. I have checked and rechecked my spelling. I have even made a condensed version that is functional and shows the alert that lets you know that you are in the calculate function but I cannot get the one on the website to work. I have taken the form and submit tags and the calculate function from the mini version and placed them into the page that I am working on and still it will not work. It has to be another incredibly stupid error.

 

[palbano]

Sarah,

There is no Calculate function in the page. There is no <script> element at all.

-pete

 

[HellTel]

I didn't get a page when I clicked review order, but managed to view enough of the source code to see this line:
....onsubmit='Calculate()';>&quot;

I can't see it making much difference, but that ; is outside the onsubmit='' bit but still within the form tag. Maybe it's throwing it off a bit. It looked right in your first post so maybe it's a typo.
Try
.....onsubmit='Calculate();'>&quot;

 

[Sarah555]

HellTel, I took your advice and made the change that you recommended.

Pablano, thank-you very much for your post!!! I took the calculate function and nested it inside the jingleordered function and that seems to work. I still do not have the calculate function working properly but for those reading this post in the archive section and wondering what I have done, I am posting the code to give you an example. The document.getElementById('jdage' + a).length is undefined at this time and is something I will have to work on but you can at least see what I mean by nesting the function calculate.

<html>
<head>
	<title>Virginia's Native Clothing</title>
	
<SCRIPT LANGUAGE=&quot;JAVASCRIPT&quot;>
<!-- 

//make cookie values global variables

	var numjingledress = 0;
	


function readCookie(JingleDressOrdered) 
{
cookie_array = document.cookie.split (&quot;; &quot;);
for (x=0; x < cookie_array.length; x++) 
{
cookieParts_array = cookie_array[x].split(&quot;=&quot;);
if (cookieParts_array[0] == &quot;JingleDressOrdered&quot;) 
{
numjingledress = cookieParts_array[1];
return numjingledress;
}
}
return null;
}



function JingleOrdered(numjingledress)
{

document.write(&quot;<FORM NAME='clothing' ACTION='mailto:loretta.stone@sympatico.ca' METHOD='POST' enctype='text/plain' onsubmit='Calculate(this);'>&quot;);
document.bgColor = &quot;#87CEEB&quot;;    
document.write(&quot;<SCRIPT LANGUAGE='JAVASCRIPT'>&quot;);
document.write(&quot;function Calculate()&quot;);
document.write(&quot;{&quot;);
document.write(&quot;var cost = 0;&quot;);
	
document.write(&quot;alert('You are in the Calculate Function');&quot;);
	
document.write(&quot;for (var a=0; a < document.getElementById('jdage' + a).length; a++);&quot;);
document.write(&quot;{&quot;);
document.write(&quot;alert('value = ' + document.getElementById('jdage' + a).value);&quot;);
document.write(&quot;if (document.getElementById('jdage' + a).checked)&quot;);
document.write(&quot;{&quot;);
document.write(&quot;if (document.getElementById('jdage' + a).value == 'toddler')&quot;);
document.write(&quot;{&quot;);
document.write(&quot;cost = cost + 75.00;&quot;);
document.write(&quot;alert('The value of cost is:  ' + cost)&quot;);
document.write(&quot;}&quot;);
document.write(&quot;else if (document.getElementById('jdage' + a).value == 'youth')&quot;);
document.write(&quot;{&quot;);
document.write(&quot;cost = cost + 165.00;&quot;);
document.write(&quot;alert('The value of cost is:  ' + cost)&quot;);
document.write(&quot;}&quot;);
document.write(&quot;else if (document.getElementById('jdage' + a).value == 'adult')&quot;);
document.write(&quot;{&quot;);
document.write(&quot;cost = cost + 300.00;&quot;);
document.write(&quot;alert('The value of cost is:  ' + cost)&quot;);
document.write(&quot;}&quot;);
document.write(&quot;}&quot;);
document.write(&quot;}&quot;);
document.write(&quot;}&quot;);
document.write(&quot;</SCRIPT>&quot;);


var colour = new Array(&quot;aqua&quot;, &quot;beige&quot;, &quot;black&quot;, &quot;light blue&quot;, &quot;medium blue&quot;, &quot;dark blue&quot;, &quot;navy&quot;, &quot;dark goldenrod&quot;, &quot;light green&quot;, &quot;lime green&quot;, &quot;medium green&quot;, &quot;dark green&quot;, &quot;light pink&quot;, &quot;pink&quot;, &quot;hot pink&quot;, &quot;red&quot;, &quot;burgundy&quot;, &quot;maroon&quot;, &quot;mauve&quot;, &quot;medium purple&quot;, &quot;dark purple&quot;, &quot;light salmon&quot;, &quot;dark salmon&quot;, &quot;orange&quot;, &quot;medium yellow&quot;, &quot;dark yellow&quot;, &quot;white&quot;, &quot;fuschia&quot;);

var jdcolourValue = new Array(&quot;aqua&quot;, &quot;beige&quot;, &quot;black&quot;, &quot;light_blue&quot;, &quot;medium_blue&quot;, &quot;dark_blue&quot;, &quot;navy&quot;, &quot;dark_goldenrod&quot;, &quot;light_green&quot;, &quot;lime_green&quot;, &quot;medium_green&quot;, &quot;dark_green&quot;, &quot;light_pink&quot;, &quot;pink&quot;, &quot;hot_pink&quot;, &quot;red&quot;, &quot;burgundy&quot;, &quot;maroon&quot;, &quot;mauve&quot;, &quot;medium_purple&quot;, &quot;dark_purple&quot;, &quot;light_salmon&quot;, &quot;dark_salmon&quot;, &quot;orange&quot;, &quot;medium_yellow&quot;, &quot;dark_yellow&quot;, &quot;white&quot;, &quot;fuschia&quot;);

var variable = new Array(&quot;main&quot;, &quot;second&quot;, &quot;third&quot;);

var j = 0;
var l = 0;
var m = 0;
var n = 0;
var o = 0;
var p = 0; 
var q = 0;
var r = 0;
	
while (numjingledress > 0)
{

numjingledress--;
document.write(&quot;<H3><B>Jingle Dress</B></H3>&quot;);

		
for (var k = 0; k <= 2; k++)
{
var jdname = &quot;jdname&quot; + j;
var jdclothtype = &quot;jdclothtype&quot; + l;	
var jdage;
var jdchest = &quot;jdchest&quot; + n;
var jdwaist = &quot;jdwaist&quot; + o;
var jdhips = &quot;jdhips&quot; + p;
var jdheight = &quot;jdheight&quot; + q;

document.write(&quot;Please choose the &quot; + variable[k] + &quot; colour of your jingle dress:&quot;);
document.write(&quot;<table border=1>&quot;);
			
for (var i = 0; i <= 27; i++)
{                          
			
document.write(&quot;<TR>&quot;);
document.write(&quot;<TD>&quot;);
document.write(&quot;<INPUT TYPE=\&quot;RADIO\&quot; NAME=&quot; + jdname + &quot;VALUE=&quot; + jdcolourValue[i] + &quot;>&quot;);
document.write(colour[i]);
document.write(&quot;</TD>&quot;);
i++;
document.write(&quot;<TD>&quot;);
document.write(&quot;<INPUT TYPE=\&quot;RADIO\&quot; NAME=&quot; + jdname + &quot;VALUE=&quot; + jdcolourValue[i] + &quot;>&quot;);
document.write(colour[i]);
document.write(&quot;</TD>&quot;);
i++;
document.write(&quot;<TD>&quot;);
document.write(&quot;<INPUT TYPE=\&quot;RADIO\&quot; NAME=&quot; + jdname + &quot;VALUE=&quot; + jdcolourValue[i] + &quot;>&quot;);
document.write(colour[i]);
document.write(&quot;</TD>&quot;);
i++;
document.write(&quot;<TD>&quot;);
document.write(&quot;<INPUT TYPE=\&quot;RADIO\&quot; NAME=&quot; + jdname + &quot;VALUE=&quot; + jdcolourValue[i] + &quot;>&quot;);
document.write(colour[i]);
document.write(&quot;</TD>&quot;);
document.write(&quot;</TR>&quot;);
}

document.write(&quot;</TABLE>&quot;);
document.write(&quot;<BR>&quot;);
document.write(&quot;Please choose the type of material:&quot;);
document.write(&quot;<TABLE border=1>&quot;);
document.write(&quot;<TR>&quot;);
document.write(&quot;<TD><INPUT TYPE=\&quot;RADIO\&quot; NAME=&quot; + jdclothtype + &quot; VALUE=\&quot;broadcloth\&quot;>broadcloth</TD>&quot;);
document.write(&quot;<TD><INPUT TYPE=\&quot;RADIO\&quot; NAME=&quot; + jdclothtype + &quot; VALUE=\&quot;satin\&quot;>satin</TD>&quot;);
document.write(&quot;<TD><INPUT TYPE=\&quot;RADIO\&quot; NAME=&quot; + jdclothtype + &quot; VALUE=\&quot;sequins\&quot;>sequined accents</TD>&quot;);
document.write(&quot;<TD><INPUT TYPE=\&quot;RADIO\&quot; NAME=&quot; + jdclothtype + &quot; VALUE=\&quot;cotpol\&quot;>cotton/polyester blend</TD>&quot;);
document.write(&quot;</TR>&quot;);
document.write(&quot;</TABLE>&quot;);
document.write(&quot;<BR><BR>&quot;);
j++;
l++;
}
			
document.write(&quot;Please enter the measurements of the individual this item is for in inches:&quot;);
document.write(&quot;<TABLE>&quot;);
document.write(&quot;<TR>&quot;);
document.write(&quot;<TD>Chest <INPUT NAME=&quot; + jdchest + &quot; TYPE=\&quot;TEXT\&quot; VALUE=\&quot;\&quot; SIZE=3></TD>&quot;);
document.write(&quot;<TD>Waist <INPUT NAME=&quot; + jdwaist + &quot; TYPE=\&quot;TEXT\&quot; VALUE=\&quot;\&quot; SIZE=3></TD>&quot;);
document.write(&quot;<TD>Hips <INPUT NAME=&quot; + jdhips + &quot; TYPE=\&quot;TEXT\&quot; VALUE=\&quot;\&quot; SIZE=3></TD>&quot;);
document.write(&quot;<TD>Height <INPUT NAME=&quot; + jdheight + &quot; TYPE=\&quot;TEXT\&quot; VALUE=\&quot;\&quot; SIZE=4></TD>&quot;);
document.write(&quot;</TR>&quot;);
document.write(&quot;</TABLE>&quot;);
document.write(&quot;<BR>&quot;);
document.write(&quot;Please indicate the age of the individual the dress is for:&quot;);
document.write(&quot;<table>&quot;
                + &quot;<TR>&quot;
                + &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (r++) + &quot; TYPE=RADIO VALUE=toddler>Toddler</TD>&quot;
                + &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (r++) + &quot; TYPE=RADIO VALUE=youth>Youth</TD>&quot;
                + &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (r++) + &quot; TYPE=RADIO VALUE=adult>Adult</TD>&quot;
                + &quot;</TR>&quot;
                + &quot;</table>&quot;
                );
			
m++;
n++;
o++;
p++;
q++;
r++;
}	
	
document.write(&quot;<center><INPUT TYPE=SUBMIT VALUE='Submit Order'></center>&quot;);
document.write(&quot;</FORM>&quot;);
} 



//main function that calls functions to read the cookies and then display order form based on value of cookies


function Main()
{
	readCookie();	
	JingleOrdered(numjingledress);
	
}


//-->
</SCRIPT>
</HEAD>
<BODY TEXT=&quot;#000000&quot; BGCOLOR=&quot;#87CEEB&quot; LINK=&quot;#FF00FF&quot; VLINK=&quot;#EE82EE&quot; ALINK=&quot;#FF0000&quot; onLoad=&quot;Main();&quot;>
 
</html>