Dynamic "Text " as opposed to returned Input Text Box "Text"

MustangManny · Mar 10, 2002

Hello,

I am using an Ultradev Form Extension by Yaromat written in Javascript.

http://www.yaromat.com/dw/example/calculateform.php

It works great. But is there a way to have the total which dynamically changes onBlur display as plain dynamic text as opposed to text in an input box?

Been up all night looking for answers.

Thanks in advance.

harlekeyn · Mar 10, 2002

Yes you can.
It is very easy with the following
script I wrote, which I normally keep
in a src-file called "monitor.js."

I use it all the time to create dynamic layers.

Perhaps now you can help me answer
my question. Please read :
thread216-227913
Tristan Laurillard
harlekeyn@gmx.net

Code:

<html>
<head>


<SCRIPT language=&quot;Javascript&quot;>


// monitor.js version 2001.12.16
//
// description:
// creates a dynamic layer for both MSIE and NN
// and includes a few more handy functions:
//
// ===================================
// > > > > > EXAMPLE < < < < < < <
// 
// in body: monitor(&quot;mymonitor&quot;,25,200,150,150);
// if you want the layer to be placed relative to the HTML-
BODY
// or
// in body: monitor(&quot;mymonitor&quot;,25,200,150,150,'glued');
// if you want the layer to be placed relative to the WINDOW
//
//                       ---to change its contents--- 
//                       changemymonitor(&quot;hello&quot;);
//
//                       ---to move the layer--
//                       movemymonitor(40,40);
//
//                       ---to place the layer to a certain 
point---
//                       placemymonitor(125,350);
//
//                       ---to load next.html in the layer--
- [currently only MSIE]
//                       loadpageinmymonitor
(&quot;next.html&quot;,&quot;scrolling=yes&quot;);     or
//                       loadpageinmymonitor
(&quot;next.html&quot;,&quot;scrolling=no&quot;);     or
//                       loadpageinmymonitor
(&quot;next.html&quot;,&quot;scrolling=auto&quot;);
//
// ===================================
//
// this javascript is to be improved
// to receive a new version when updated, or
// to suggest changes, mail to harlekeyn@gmx.net
//
// Tristan Laurillard
// [URL unfurl="true"]www.laurillard.8m.com[/URL]

function monitor(name,left,top,width,height,layerglue)
{
var centerwidth = 800; 
var centerheight = 600;

if (document.all) 
	{
	centerwidth = ((document.body.clientWidth)/2); 
	centerheight = ((document.body.clientHeight)/2);
	}

if (document.layers) 
	{
	centerwidth = ((window.innerWidth)/2); 
	centerheight = ((window.innerHeight)/2);
	}


if ((left == 'center')) left=centerwidth; 
if ((top == 'center')) top=centerheight;

document.write(&quot;<style>#&quot; + name + &quot;2 \{POSITION:absolute; 
VISIBILITY:visible; TOP:&quot; + top + &quot;px; LEFT:&quot; + left + &quot;px; 
Z-INDEX:2; WIDTH:&quot; + width + &quot;; HEIGHT:&quot; + height + &quot;\} 
<\/style>&quot;);
document.write(&quot;<DIV ID='&quot; + name + &quot;2'><table border=0 
cellpadding=0 cellspacing=0><tr><td height=&quot; + height + &quot; 
width=&quot; + width + &quot; ID='cel&quot; + name 
+ &quot;'></td></tr></table></DIV>&quot;);
document.write(&quot;<LAYER ID='&quot; + name + &quot;' top=&quot; + top + &quot; 
left=&quot; + left + &quot; width=&quot; + width + &quot; height=&quot; + height 
+ &quot;></layer>&quot;);
document.write(&quot;<script language=\&quot;Javascript\&quot;>&quot;);
document.write(&quot;function change&quot; + name + &quot;(text){if 
(document.layers) {	document.&quot; + name + &quot;.document.write
(text); document.&quot; + name + &quot;.document.close();} else if 
(document.all) {cel&quot; + name + &quot;.innerHTML=text;}}&quot;);
document.write(&quot;function move&quot; + name + &quot;(x,y) {if 
(document.all) {&quot; + name + &quot;2.style.pixelLeft += x; &quot; + name + &quot;2.style.pixelTop += y; }    else if 
(document.layers) { document.layers.&quot; + name + &quot;.left = 
((document.layers.&quot; + name + &quot;.left) + (x)) ; document.layers.&quot; + name + &quot;.top = ((document.layers.&quot; + 
name + &quot;.top) + (y)) ; }}&quot;);

	if (layerglue == &quot;glued&quot;)
	document.write(&quot;function place&quot; + name + &quot;(x,y) {if 
(document.all) {&quot; + name + &quot;2.style.left = (x + 
document.body.scrollLeft); &quot; + name + &quot;2.style.top = (y + 
document.body.scrollTop); }    else if (document.layers) { 
document.layers.&quot; + name + &quot;.left = x ; document.layers.&quot; + 
name + &quot;.top = y ; }}&quot;)

	else
	document.write(&quot;function place&quot; + name + &quot;(x,y) {if 
(document.all) {&quot; + name + &quot;2.style.pixelLeft = x; &quot; + name 
+ &quot;2.style.pixelTop = y; }    else if (document.layers) { 
document.layers.&quot; + name + &quot;.left = x ; document.layers.&quot; + 
name + &quot;.top = y ; }}&quot;);

	if (document.all)
	document.write(&quot;function loadpagein&quot; + name 
+ &quot;(url,scrolloption) {change&quot; + name + &quot;('<iframe ' + 
scrolloption + ' frameborder=0 height=100% width=100% src=' 
+ url + '></iframe>');}&quot;);

	if (document.layers)
	document.write(&quot;function loadpagein&quot; + name 
+ &quot;(url,scrolloption) {change&quot; + name 
+ &quot;('<center>+++<br>Script doesn\\'t work in 
Netscape.<br>This<a href=' + url + '> page</a> won\\'t load 
inside this layer.<br>+++</center>');}&quot;);

document.write(&quot;var &quot; + name + &quot;status = 'loaded';&quot;);
document.write(&quot;<\/script>&quot;);

}




function YY_CalculateForm() { //v3.03
//copyright (c)1999-2001 Yaromat.com
  var args=YY_CalculateForm.arguments;
  var myResult=&quot;&quot;; var myField=&quot;0&quot;;
  if (document.all){eval(&quot;args[0]=args[0].replace(/.layers/gi, '.all');&quot;);}
  for (var i=3; i<args.length; i++){
    if(args[i].charAt(0)!=&quot;#&quot;){
      myResult=myResult+args[i];
    }else{
      myField=eval(args[0]+'.'+ args[i].substring(1)
+'.value'); if(myField==&quot;&quot;)myField=&quot;0&quot;;
      myResult=myResult+myField;
    }
  }
  with (Math) {
    var myExpo = pow(10, args[2]);
    var myResult = round(myExpo*eval(myResult)/1)/myExpo+&quot;&quot;;
    myResult += (myResult.indexOf('.')==-1)?&quot;.&quot;:&quot;&quot;;
    var missingZ = (args[2] - myResult.length + 
myResult.indexOf('.') + 1);
    for (var i=0; i<missingZ; i++){ myResult += &quot;0&quot; }
  }
  var myReturn = eval(args[0]+'.'+args[1]);
  myReturn.value = myResult;

changemp(&quot;<font size=4><b>&quot; + myResult + &quot;</b></font>&quot;);

}




</SCRIPT>

</head>
<body>

<SCRIPT language=&quot;Javascript&quot;>
monitor('mp',100,100,1,1);
</SCRIPT>


<form method=&quot;post&quot; action=&quot;&quot; name=&quot;myForm&quot;>
  <table width=&quot;99%&quot; border=&quot;0&quot; height=&quot;99%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
    <tr align=&quot;center&quot; valign=&quot;middle&quot;>
      <td>
        <p> </p>
<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
        
<tr> 
          
        
<td bgcolor=&quot;#999999&quot;><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; 
height=&quot;1&quot; alt=&quot;&quot;></td>
<td bgcolor=&quot;#999999&quot;><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; 
height=&quot;1&quot; alt=&quot;&quot;></td>
<td bgcolor=&quot;#999999&quot;><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; 
height=&quot;1&quot; alt=&quot;&quot;></td>
<td><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot; 
alt=&quot;&quot;></td>
</tr>
        
<tr> 
          
        
<td bgcolor=&quot;#999999&quot; rowspan=&quot;4&quot;><img src=&quot;ex/spacer.gif&quot; 
width=&quot;1&quot; height=&quot;1&quot; alt=&quot;&quot;></td>
<td bgcolor=&quot;#F0F4F0&quot;><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; 
height=&quot;13&quot; alt=&quot;&quot;></td>
<td bgcolor=&quot;#999999&quot; rowspan=&quot;4&quot;><img src=&quot;ex/spacer.gif&quot; 
width=&quot;1&quot; height=&quot;1&quot; alt=&quot;&quot;></td>
<td bgcolor=&quot;#404040&quot; rowspan=&quot;4&quot;><img src=&quot;ex/spacer.gif&quot; 
width=&quot;1&quot; height=&quot;1&quot; alt=&quot;&quot;></td>
</tr>
        
<tr> 
          
<td bgcolor=&quot;#F0F4F0&quot; align=&quot;center&quot;> 
            
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; 
cellpadding=&quot;0&quot;>
              
<tr> 
                
<td align=&quot;center&quot;> 
                  
<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; 
width=&quot;450&quot; align=&quot;center&quot; height=&quot;178&quot;>
          
<tr valign=&quot;middle&quot;>
            
<td align=&quot;right&quot;>
              
<input type=&quot;hidden&quot; name=&quot;priceBier&quot; value=&quot;21&quot;>
              Bier </td>
<td align=&quot;center&quot;> 
              
<input type=&quot;text&quot; name=&quot;pcsBier&quot; size=&quot;4&quot; value=&quot;1&quot; 
onBlur=&quot;YY_CalculateForm
('document.myForm','txtBier','2','#pcsBier','*','#priceBier'
);YY_CalculateForm
('document.myForm','txtSumme','2','\(','#pcsBier','*','#pric
eBier','+','#pcsSchnaps','*','#priceSchnaps','+','#pcsWein',
'*','#priceWein','\)','*','\(','#priceTax','+','100','\)','/
','100');YY_CalculateForm
('document.myForm','txtAnzahl','2','\(','#txtBier','+','#txt
Schnaps','+','#txtWein','\)','*','#priceTax','/','100')&quot;>
              </td>
<td valign=&quot;middle&quot; align=&quot;left&quot;> 
              
<input type=&quot;text&quot; name=&quot;txtBier&quot; size=&quot;20&quot; 
value=&quot;21.00111&quot;>
              </td>
</tr>
          
<tr valign=&quot;middle&quot;>
            
<td align=&quot;right&quot;>
              
<input type=&quot;hidden&quot; name=&quot;priceSchnaps&quot; value=&quot;33&quot;>
              Schnaps </td>
<td align=&quot;center&quot;> 
              
<input type=&quot;text&quot; name=&quot;pcsSchnaps&quot; size=&quot;4&quot; value=&quot;1&quot; 
onBlur=&quot;YY_CalculateForm
('document.myForm','txtSchnaps','2','#pcsSchnaps','*','#pric
eSchnaps');YY_CalculateForm
('document.myForm','txtSumme','2','\(','#pcsBier','*','#pric
eBier','+','#pcsSchnaps','*','#priceSchnaps','+','#pcsWein',
'*','#priceWein','\)','*','\(','#priceTax','+','100','\)','/
','100');YY_CalculateForm
('document.myForm','txtAnzahl','2','\(','#txtBier','+','#txt
Schnaps','+','#txtWein','\)','*','#priceTax','/','100')&quot;>
              </td>
<td valign=&quot;middle&quot; align=&quot;left&quot;> 
              
<input type=&quot;text&quot; name=&quot;txtSchnaps&quot; size=&quot;20&quot; value=&quot;33&quot;>
              </td>
</tr>
          
<tr valign=&quot;middle&quot;>
            
<td align=&quot;right&quot;>
              
<input type=&quot;hidden&quot; name=&quot;priceWein&quot; value=&quot;43.50&quot;>
              Wein </td>
<td align=&quot;center&quot;> 
              
<input type=&quot;text&quot; name=&quot;pcsWein&quot; size=&quot;4&quot; value=&quot;1&quot; 
onBlur=&quot;YY_CalculateForm
('document.myForm','txtWein','2','#pcsWein','*','#priceWein'
);YY_CalculateForm
('document.myForm','txtSumme','2','\(','#pcsBier','*','#pric
eBier','+','#pcsSchnaps','*','#priceSchnaps','+','#pcsWein',
'*','#priceWein','\)','*','\(','#priceTax','+','100','\)','/
','100');YY_CalculateForm
('document.myForm','txtAnzahl','2','\(','#txtBier','+','#txt
Schnaps','+','#txtWein','\)','*','#priceTax','/','100')&quot;>
              </td>
<td valign=&quot;middle&quot; align=&quot;left&quot;> 
              
<input type=&quot;text&quot; name=&quot;txtWein&quot; size=&quot;20&quot; value=&quot;43.50&quot;>
              </td>
</tr>
          
<tr valign=&quot;middle&quot;>
            
<td align=&quot;right&quot;>
              Sub
              
<input type=&quot;hidden&quot; name=&quot;priceTax&quot; value=&quot;16&quot;>
              </td>
<td align=&quot;center&quot;> </td>
<td valign=&quot;middle&quot; align=&quot;left&quot;>
              
<input type=&quot;text&quot; name=&quot;txtAnzahl&quot; size=&quot;20&quot; 
class=&quot;input1&quot; value=&quot;0&quot;>
              </td>
</tr>
          
<tr valign=&quot;middle&quot;>
            
<td align=&quot;right&quot;>+16%
              Tax</td>
<td align=&quot;center&quot;> </td>
<td valign=&quot;middle&quot; align=&quot;left&quot;> </td>
</tr>
          
<tr valign=&quot;middle&quot;>
            
<td align=&quot;right&quot;>InvTotal</td>
<td align=&quot;center&quot;>
              
<input type=&quot;button&quot; name=&quot;calculate&quot; value=&quot;calculate&quot; 
onClick=&quot;YY_CalculateForm
('document.myForm','txtBier','5','#pcsBier','*','#priceBier'
);YY_CalculateForm
('document.myForm','txtWein','2','#pcsWein','*','#priceWein'
);YY_CalculateForm
('document.myForm','txtSchnaps','2','#pcsSchnaps','*','#pric
eSchnaps');YY_CalculateForm
('document.myForm','txtAnzahl','2','\(','#txtSchnaps','+','#
txtWein','+','#txtBier','\)');YY_CalculateForm
('document.myForm','txtSumme','2','#txtAnzahl','*','#priceTa
x','/','100')&quot;>
              <font size=&quot;2&quot; face=&quot;Arial, Helvetica, sans-
serif&quot;></font></td>
<td valign=&quot;middle&quot; align=&quot;left&quot;><font size=&quot;2&quot; 
face=&quot;Arial, Helvetica, sans-serif&quot;>
              
<input type=&quot;text&quot; name=&quot;txtSumme&quot; size=&quot;20&quot;>
              </font></td>
</tr>
<tr align=&quot;center&quot; valign=&quot;middle&quot;>
<td colspan=&quot;3&quot;> Change
              the amount of pieces and the invoice will be 
calculated.</td>
</tr>
        
</table>
</td>
</tr>
            
</table>
</td>
</tr>
        
<tr> 
          
        
<td bgcolor=&quot;#F0F4F0&quot;> <img src=&quot;ex/spacer.gif&quot; 
width=&quot;100%&quot; height=&quot;1&quot; alt=&quot;&quot;> 
          
<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; 
bgcolor=&quot;#C0C0C0&quot;>
              
<tr> 
                
<td class=&quot;vr&quot; nowrap> //calculate form. </td>
</tr>
            
</table>
</td>
</tr>
        
<tr> 
          
        
<td bgcolor=&quot;#999999&quot;><img src=&quot;ex/spacer.gif&quot; width=&quot;377&quot; 
height=&quot;1&quot; alt=&quot;&quot;></td>
</tr>
        
<tr> 
          
        
<td><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot; 
alt=&quot;&quot;></td>
<td bgcolor=&quot;#404040&quot;><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; 
height=&quot;1&quot; alt=&quot;&quot;></td>
<td bgcolor=&quot;#404040&quot;><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; 
height=&quot;1&quot; alt=&quot;&quot;></td>
<td bgcolor=&quot;#404040&quot;><img src=&quot;ex/spacer.gif&quot; width=&quot;1&quot; 
height=&quot;1&quot; alt=&quot;&quot;></td>
</tr>
      
</table>
</td>
    </tr>
  </table>
  <p> </p>
</form>
<p> </p><p> </p>




</body>

</html>

MustangManny · Mar 11, 2002

Thank you so much for your response, unfortunately I'm not certain how to make it work.

Would you be so kind, if you get the chance to help a newbie out?

In any occasion, thank you!

harlekeyn · Mar 11, 2002

Sure, do you have netmeeting?
email me: harlekeyn@gmx.net

MustangManny · Mar 11, 2002

No,I'm afraid I do not.
I wish I could just make sense of where to modify yaromat's code so that I can change the variables (products and prices) myself so that the total comes out in text format and not inside an input box.

harlekeyn · Mar 11, 2002

It comes down to this:

The only way to have text appear
on a page, without loading a new
page is to use a layer.

Now, Netscape and MS could initially
not agree on how to call such a layer.
So it was always a difficult task
to use layers, since you had to first
determine what type of browser the vistor
was using, then you had to create the
layer, and then you had to find a way to
write to it.

Most programmers didn't bother and just
avoided layers at all. A shame because you
can do all sorts of fun stuff with them.

For myself, I created a .js-file to take care
of these layers for good. Now, all I have
to do to create a layer is write
monitor("mylayer",1,1,1,1);

Then, when I wish to change its contents,
I write changemylayer("hello&quot

;.

However, the gentlemen at Netscape
changed it all again. They took
out their layer function in NN6.0.

So, at the moment, I am re-writing monitor.js
to take care of it. Shouldn't be too difficult.

Sorry, I got carried away...

Changeing Yaromat's code will not help.
It spits out a value. And it is up to
you what to do with this value.

Either don't bother writing a text-value to
your page, or program something to write to
a layer, or use my monitor.js. In a few hours
version 2002-03-11 will be available.

Tristan

PS. To see how monitor.js works, check for example

http://www.wellnessworks.ws

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!

Dynamic "Text " as opposed to returned Input Text Box "Text"

MustangManny

MIS

harlekeyn

Programmer

MustangManny

MIS

harlekeyn

Programmer

MustangManny

MIS

harlekeyn

Programmer

Similar threads

Part and Inventory Search

Sponsor

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!

Dynamic &quot;Text &quot; as opposed to returned Input Text Box &quot;Text&quot;

MustangManny

MIS

harlekeyn

Programmer

MustangManny

MIS

harlekeyn

Programmer

MustangManny

MIS

harlekeyn

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

Dynamic "Text " as opposed to returned Input Text Box "Text"