Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JavaScript Error windowVar.document.formName has no properties

Status
Not open for further replies.

jswannabe

Programmer
Aug 10, 2007
8
US
I'm a real rube at JavaScript, so I apologize in advance if this question is overly stupid...

I have a page called dollar_calculator.html (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
My JavaScript exists in the same directory, in an external file using the following tag:
<script language="JavaScript" src="calc_window.js"></script>

There is a form on this page using the following form tag:
<form name="calcForm" id="columnarForm" action="" >
The form has several elements on it, including text, select and checkboxes.

Also, there is a pushbutton form element on calcForm with the following code:
<input type="button" name="calculate" value="Calculate Pricing" onclick="calcPriceFromTotal(this.form)" class="button" />

Once the user enters several pieces of data, they press the Calculate Pricing pushbutton. The calcPriceFromTotal(this.form) function is called and calculates a pricing estimate for their purchase. The calculations are displayed in additional form fields. This was all working fine (much to my surprise) when I had all of the form fields in one form on one page. But…

Then I got the brilliant idea to remove form fields which display the calculated estimate from dollar_calculator.html and open up a secondary window called estimate.html to show the result. After altering the calc_window.js file I’ve broken something and have spent several hours trying to research what I’ve done wrong – with no positive result.

The secondary window I am opening is called estimate.html. It contains a form with the following tag:
<form name="estimateForm" id="columnarForm" action="" >
The form has several text input elements on it.

Now when I click the Calculate Pricing button, in the Mozilla Firefox Error Console I can see and error which says:
myResultWindow.document.estimateForm has no properties (line 77)

And line 77 is:
myResultWindow.document.estimateForm.totalArea2.value = fmt(areaSqV);

I am running all of this locally on my laptop – when I FTP everything to the server, I see no results in my estimateForm and the Error Console provides no feedback.

I have tried several things including not defining the myResultWindow variable, changing where I define the variable, etc. I have a decent background in OO client/server, but not with web stuff. My understanding was that the window.open() would return a reference to the window and from there, I would be able to access my form and form elements. I’m also quite fuzzy on the relationship between the windows and the JS when the JS exists in an external file.

Here’s the calc_window.js file:
<!--Calculator -->

/******* Editable Pricing Items *********/

var kyBlueGrassPrice = 0.28;

var fescuePrice = 0.15;

var cTaxRate = .029;

var sodInstallPrice = .17;

var sodAmendPrice = .30;

var sodTearOutPrice = 1.00;



/******* Other Variables ******/

var sodPrice = 0;

var isNN = 1;

var totalFtSq = 0;

var pCharge = 0;

var sCharge = 0;

var cTax = 0;

var deliveryCharge = 0;

var sodInstallCharge = 0;

var sodAmendCharge = 0;

var sodTearOutCharge = 0;

var myResultWindow = '';




function fmt(val){

if(val+""=="NaN")

return "0";

else

return Math.round(val*100)/100;

}


function calcPriceFromTotal(inForm){


areaSqV = inForm.totalArea.value

if(!checkStr(areaSqV, "0123456789.")) areaSqV = 0

sodPrice = kyBlueGrassPrice;


myResultWindow = window.open("estimate.html", "resultWindow","resizable=no,height=450,width=750,scrollbars=yes");

myResultWindow.document.estimateForm.totalArea2.value = fmt(areaSqV);

totalFtSq = fmt(areaSqV);

sodQC = Math.ceil(fmt(areaSqV/10));

myResultWindow,document.estimateForm.Quantity.value = sodQC;

sCharge = sodQC*sodPrice*10;

myResultWindow.document.estimateForm.sodCharge.value = dollarize(sCharge);

myResultWindow.document.estimateForm.pallets.value = Math.ceil(fmt(myResultWindow.document.estimateForm.Quantity.value/64));

pCharge = myResultWindow.document.estimateForm.pallets.value*10;

myResultWindow.document.estimateForm.palletCharge.value = dollarize(pCharge);

cTax = (sCharge) * cTaxRate;

myResultWindow.document.estimateForm.coTax.value = dollarize(cTax);

deliveryCharge = fmt(inForm.delivery.value);

myResultWindow.document.estimateForm.checkdelivery.value = dollarize(inForm.delivery.value);

if( inForm.installation.checked) {
sodInstallCharge = areaSqV * sodInstallPrice;
myResultWindow.document.estimateForm.installCharge.value = dollarize(sodInstallCharge);
} else {
sodInstallCharge = 0;
myResultWindow.document.estimateForm.installCharge.value = dollarize(sodInstallCharge);
}

if( inForm.soil_amend.checked) {
sodAmendCharge = areaSqV * sodAmendPrice;
myResultWindow.amendCharge.value = dollarize(sodAmendCharge);
} else {
sodAmendCharge = 0;
myResultWindow.document.estimateForm.amendCharge.value = dollarize(sodAmendCharge);
}

if( inForm.tear_out.checked) {
sodTearOutCharge = areaSqV * sodTearOutPrice;
myResultWindow.document.estimateForm.tearOutCharge.value = dollarize(sodTearOutCharge);
} else {
sodTearOutCharge = 0;
myResultWindow.document.estimateForm.tearOutCharge.value = dollarize(sodTearOutCharge);
}


myResultWindow.document.estimateForm.cost.value = dollarize(sCharge + pCharge + cTax + deliveryCharge + sodInstallCharge + sodAmendCharge + sodTearOutCharge);
myResultWindow.focus();


}



function checkStr(test, goodvals){

test = test.toString();

goodvals = goodvals.toString();

breaker = false;

for(counter=0; counter < test.length && breaker == false; counter++){

if(goodvals.indexOf(test.charAt(counter)) == -1){

breaker = true;

}

}

return (!breaker);

}


function dollarize(q){

var tot=q.toString().replace(/^\$|,/g, ''), count=0

if (!/^\d*\.?\d+$/.test(tot)){
alert('Valid Numbers or Valid Dollar Values only Please')
return q;
}

tot=tot.indexOf('.')==-1? tot+='.0' : tot.length-tot.indexOf('.')==1? tot+='0' : tot
tot=tot.split('.')
tot[1]=Math.round(Math.abs('.'+tot[1])*100).toString()

if(tot[1].length>2){
tot[0]=tot[0]==''? '1' : (parseInt(tot[0], 10)+1).toString()
tot[1]=tot[1].charAt(1).toString()+tot[1].charAt(2)
}

tot[2]=''
tot[0]=tot[0]==''? '0' : parseInt(tot[0], 10).toString()

for (var i_tem = tot[0].length-1 ; i_tem > -1 ; i_tem--){
if (count&&count%3==0)
tot[2]+=','
tot[2]+=tot[0].charAt(i_tem)
count++
}

tot='$'+tot[2].split('').reverse().join('')+'.'+tot[1]
tot=tot.length-tot.indexOf('.')==2? tot+='0' : tot
return tot;
}


Thanks in advance for any help!
 
>myResultWindow.document.estimateForm.totalArea2.value = fmt(areaSqV);

You're not going to like it very much. Set some time delay and make areqSqv global (which you have maybe by accident since you've not consciously made it local by var keyword). myResultWindow, you've conciously made it global - that is needed.

[tt]SetTimeout("myResultWindow.document.estimateForm.totalArea2.value = fmt(areaSqV)",100);[/tt]
 
While I appreciate your feedback, I'm not sure I understand how that is supposed to allow me to reference the window form element properties.

Can you explain further please?

Thanks.
 
moz/ff needs some time delay to establish the well-ordering (synchronization) of processes. If you refer ahead of time document-form-field of the new window, it will error out.
 
Oh great and powerful tsuji, I am humbled by your presence!

Ok - so I just tried this and it works (not that I doubted you).

But I had to change the timing interval on the setTimeout function to 1000 for IE to work.

My concern here is that:
1. I'm going to have to do this for all of my accesses to the form elements in the 2nd window (estimate.html), since this works like (excuse the client/server term here) like a PostEvent.

2. Since I see the difference in the timing with IE vs. Moz/FF, what if someone (heaven forbid) has dial-up and the window takes longer to open? Doesn't this further dela the well-ordering?

3. How in the world would a newbie like me have figured this out? I'm so mad at myself for having wasted several hours on it (literally).

4. Is there some better option that will stop the execution of the JavaScript for a time period while the well-ordering is established so that I don't have to worry about #1 & #2 above? Or is there a better approach all together that I should consider?

Thanks again!
 
[1] To avoid any ad hoc in the setting of time, the more formal way is to establish a function to do it.
[tt]
function doit(v) {
var owin=myResultWindow; //making use of globalness of myResultWindow
if (owin && owin.document && owin.document.estimateForm && owin.document.estimateForm.totalArea2) {
owin.document.estimateForm.totalArea2.value=v;
} else {
if (!owin.closed) {
setTimeout("doit("+v+")",100);
}
}
}
[/tt]
[2] Then at the problematic line, replace it by calling the function doit.
[tt]
[red]//[/red]myResultWindow.document.estimateForm.totalArea2.value = fmt(areaSqV);
doit(fmt(areaSqV)); //now areaSqV need not be global
}
[/tt]
[2.1] In this scheme, it is still based on myResultWindow being global, but areaSqV needs not be global anymore.
 
Further note:

[1'] The else part should better include a checking on owin too and put also put owin to null before garbage collection. Here is a relisting.
[tt]
function doit(v) {
var owin=myResultWindow; //making use of globalness of myResultWindow
if (owin && owin.document && owin.document.estimateForm && owin.document.estimateForm.totalArea2) {
owin.document.estimateForm.totalArea2.value=v;
} else {
if (owin && !owin.closed) {
setTimeout("doit("+v+")",100);
}
}
owin=null;
}
[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top