?
Solved

Looping over Javascript- Quick Help Anyone?

Posted on 2003-03-09
10
Medium Priority
?
281 Views
Last Modified: 2013-12-24
Hi there,

Another javascript problem.  Gosh, I'm sooo close to having this right, I don't know what I'm missing.  Hopefully this will be relatively simple for someone to figure out.  Maybe it's something as simple as syntax?

I have a dynamic form that pulls up a dynamic number of products based on some other factors that aren't important for my issue.  I have a table that lists the products and their price per unit, then I have a box to type in the number of quantity needed per product.  Then I have a "extended cost" box that should dynamically populate when a user enters in a quantity for a product.  Then at the bottom there is a TOTAL box that should automatically populate by adding all the Extended Costs together.

The problem is that I suck at figuring out how to use ColdFusion loops to loop through Javascripts.  I know it can only be done in a certain order, or it won't work.  I really thought what I had below should work, but it isn't.  Can anyone please help?  FYI... I left out the section of the table that asks for name and email, etc.  

***Oh, and Extra credit if you can also help me figure out how to populate a Quantity Total box at the bottom of the table that dynamically adds up all the quanities given.***

      <cfquery name="GetProductCompany" datasource="ds">
            SELECT * FROM relProductCompany
            INNER JOIN tblProduct ON relProductCompany.intProduct = tblProduct.ridProduct
            WHERE tblProduct.vcStatus = 'A' AND relProductCompany.intCompany = #GetSalesRep.intCompany#
            ORDER BY vcPlant, vcItemNumber
      </cfquery>

      <cfset count2 = 1><cfset count3 = 1>
      <script language="JavaScript">
      function check_submit(form) {
            check_all(form)
            if (!check_form(form)) return(false)
            return(true);
      }
      
      function check_all(form) {
      <Cfloop query="getProductCompany">
            check_quan_#count2#(form)
            <cfset count2 = count2 + 1>
      </CFLOOP>
            form.total.value = "" <cfloop query="getProductCompany">+ (parseInt(form.numQty#count3#_dol.
      value,10)<cfset count3 = count3 + 1></cfloop>)
      }
      
      function check_form(form)
      {
      return_boolean = true
       obj = eval(form)
       for(i=0;i<obj.length;i++)
       {
        field_name = obj.elements[i].name;
        if (field_name.indexOf("_ck") != -1)
        {
          if (obj.elements[i].value == "")
          {
              alert("You forgot to fill in a required field.  See yellow flag.");
            obj.elements[i].style.backgroundColor = "yellow";
            return_boolean = false
          }
          else
          {
            obj.elements[i].style.backgroundColor = "white";
          }
        }
       }
      return return_boolean;
      }

      </script>

      <form method="post" action="act_orderform.cfm" onsubmit="return check_submit(this)" name="frmOrderForm">

      <table border=1 width=790>
                  <tr>
                  <th bgcolor="##000000"><font size=-1 color="white">Plant</th><th bgcolor="##000000"><font size=-1 color="white">Item Number</th><th bgcolor="##000000"><font size=-1 color="white">Item Description</th><th bgcolor="##000000"><font size=-1 color="white">Carton Qty Ordered</th><th bgcolor="##000000"><font size=-1 color="white">Pkg Qty<BR><font size=-1 color="white">Boards/Carton</th><th bgcolor="##000000"><font size=-1 color="white">Unit Price Per Carton</th><th bgcolor="##000000"><font size=-1 color="white">Extended Price</th>
                  </tr>
                  <cfset count = 1>
                  <cfset color = "##FFFFCC">
                  <cfloop query="GetProductCompany">
                              <script language="JavaScript">
                              function check_quan_#count#(form) {
                                    var numQty#count# = parseInt(form.numQty#count#.value,10)
                                    if (numQty#count# < 0)  {
                                          form.numQty#count#.value = "0"
                                          form.numQty#count#_dol.value = "0"
                                          form.reg_num.focus();
                                          return
                                    }
                                    form.numQty#count#_dol.value = "" + (#mnyPrice# * numQty#count#)
                                    return
                              }
                           </script>
                  <tr>
                  <td bgcolor="#color#"><font size=-1>#vcPlant#</td>
                  <td bgcolor="#color#" nowrap><font size=-1>#vcItemNumber#</td>
                  <td bgcolor="#color#"><font size=-1>#vcItemDescription#</td>
                  <td bgcolor="#color#" align=center><font size=-1><input type="text" name="numQty#count#"
value="0" onFocus="check_all(this.form)"
 onBlur="check_all(this.form)"></td>
                   <td align=center bgcolor="#color#"><font size=-1><cfif numPkgQty is not "">#numPkgQty#<cfelse>&##160;</cfif></td>
                  <td bgcolor="#color#"><font size=-1>#DollarFormat(mnyPrice)#</td>
                  <td bgcolor="#color#"><font size=-1>$<INPUT TEXT NAME="numQty#count#_dol" SIZE=12 value="0"
  onFocus="check_all(this.form)" onBlur="check_all(this.form)">
</td>
                  </tr>
                  <cfset count = #count# + 1>
                  <cfif color is "##FFFFCC"><cfset color="##CCCCCC"><cfelse><cfset color="##FFFFCC"></cfif>
                  </cfloop>
                  <tr>
                  <td bgcolor="black"></td><td bgcolor="black"></td><td bgcolor="black"></td><td bgcolor="black"><font color="white"></td><td bgcolor="black"></td><td bgcolor="black"><font color="white"><strong>Total:</strong></td><td bgcolor="black">$<INPUT TEXT
NAME="total" SIZE=12 value="0"  onFocus="check_all(this.form)"
 onBlur="check_all(this.form)"></td>
                  </tr>
            </table>
<input type="submit" name="todo" value="Submit">
0
Comment
Question by:Renee_J
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 9

Expert Comment

by:HamdyHassan
ID: 8102436
I will start with extra credit, check the following example of form called "MyForm" with three input fields



At your input form

<input type="text" name="field1" size="6" onChange="CalcTotal()" >

<input type="text" name="field2" size="6" onChange="CalcTotal()" >

<input type="text" name="field3" size="6" onChange="CalcTotal()" >

<input type="text" name="totalprice" size="6"  readonly >




Javascript function

function CalcTotal()
{
     var total_price=0.00;
     total_dvd = parseFloat(document.Myform.field1.value) + parseFloat(document.Myform.field2.value) + parseFloat(document.Myform.field3.value) + parseFloat(document.Myform.field4.value) ;
    document.Myform.totalprice.value=total_price;
}
0
 

Author Comment

by:Renee_J
ID: 8105463
HamdyHassan,

Thanks for commenting on my question, although I'm not really sure how your comment will help me since I'm doing loops.

My whole problem is that I'm having issues with looping through Javascript.  Can anyone out there fix my exact code above?  I must be missing something so subtle?

-Renee
0
 
LVL 9

Expert Comment

by:HamdyHassan
ID: 8105984
this comments to let the user see the calculated total when he change the input fields.

about loops,
you have
function {  cfloop </CFLOOP> }
and also you have
cfloop   function{} </CFLOOP>

which one is working, and which one is bothering you?

Did you test the code while building it?


0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 9

Expert Comment

by:HamdyHassan
ID: 8106289
I see what do you want to do.
You can number of records - you don't know how many - and you want to create javascript function for each one, so when the user enter qty, then you calc price_dol using
price_dol = unit_price * qty

I am not sure this is idea will work, I have to test that.

What about another idea ,
Form will have <input type > for qty, u_price, price_dol
on change, you will call javascript with #count# as parameter

at the script, you will use eval() to construct which input form field you are dealing

u_price = eval ( "document.form.qry_"+count+"" )
...etc

0
 

Author Comment

by:Renee_J
ID: 8106868
Thanks, Hamdy,

OK, this is what I ended up doing, but the dollar total (var "total") is still calculating wrong?  Any ideas why?

      <script language="JavaScript">
      function check_submit(form) {
            check_all(form)
            if (!check_form(form)) return(false)
            return(true);
      }
      
       function check_all(form) {
         var recCount = #getProductCompany.recordCount#;
         form.total.value = 0;
         for (i = 1; i <= recCount; i++)
         {
             eval("check_quan(form, i, form.mnyPrice" + i + ".value)");
             form.total.value += Number(eval("form.numQty" + i + "_dol.value, 10"));
         }
      }
      
      function check_form(form)
      {
      return_boolean = true
       obj = eval(form)
       for(i=0;i<obj.length;i++)
       {
        field_name = obj.elements[i].name;
        if (field_name.indexOf("_ck") != -1)
        {
          if (obj.elements[i].value == "")
          {
              alert("You forgot to fill in a required field.  See yellow flag.");
            obj.elements[i].style.backgroundColor = "yellow";
            return_boolean = false
          }
          else
          {
            obj.elements[i].style.backgroundColor = "white";
          }
        }
       }
      return return_boolean;
      }

      </script>

<form method="post" action="act_orderform.cfm" onsubmit="return check_submit(this)" name="frmOrderForm">

<table border=1 width=790>
                  <tr>
                  <th bgcolor="##000000"><font size=-1 color="white">Plant</th><th bgcolor="##000000"><font size=-1 color="white">Item Number</th><th bgcolor="##000000"><font size=-1 color="white">Item Description</th><th bgcolor="##000000"><font size=-1 color="white">Carton Qty Ordered</th><th bgcolor="##000000"><font size=-1 color="white">Pkg Qty<BR><font size=-1 color="white">Boards<br>/Carton</th><th bgcolor="##000000"><font size=-1 color="white">Unit Price Per Carton</th><th bgcolor="##000000"><font size=-1 color="white">Extended Price</th>
                  </tr>
                  <cfset count = 1>
                  <cfset color = "##FFFFCC">
                  
                        <script language="JavaScript">
                              function check_quan(form, j, mnyPrice) {
                                    eval("numQty" + j + " = parseInt(form.numQty" + j + ".value, 10)");
                                    if (eval("numQty" + j + " < 0"))
                                    {
                                       eval("form.numQty" + j + ".value = '0' ");
                                       eval("form.numQty" + j + "_dol.value = '0' ");
                                       form.reg_num.focus();
                                       return;
                                    }
                                    eval("form.numQty" + j + "_dol.value = mnyPrice * numQty" + j);
                              }
                      </script>
                  <cfloop query="GetProductCompany">
                  <tr>
                  <td bgcolor="#color#"><font size=-1>#vcPlant#</td>
                  <td bgcolor="#color#" nowrap><font size=-1>#vcItemNumber#<input type="hidden" name="hid_ridProduct#count#" value="#ridProduct#"></td>
                  <td bgcolor="#color#"><font size=-1>#vcItemDescription#</td>
                  <td bgcolor="#color#" align=center><font size=-1><input type="text" name="numQty#count#"
value="0" onFocus="check_all(this.form)"
onBlur="check_all(this.form)" size=3></td>
                   <td align=center bgcolor="#color#"><font size=-1><cfif numPkgQty is not "">#numPkgQty#<cfelse>&##160;</cfif></td>
                  <td bgcolor="#color#"><font size=-1>#DollarFormat(mnyPrice)#<input type="hidden" name="mnyPrice#count#" value="#mnyPrice#"></td>
                  <td bgcolor="#color#"><font size=-1>$<INPUT TEXT NAME="numQty#count#_dol" SIZE=5 value="0"
 onFocus="check_all(this.form)" onBlur="check_all(this.form)">
</td>
                  </tr>
                  <cfset count = #count# + 1>
                  <cfif color is "##FFFFCC"><cfset color="##CCCCCC"><cfelse><cfset color="##FFFFCC"></cfif>
                  </cfloop>
                  <tr>
                  <td bgcolor="black"></td><td bgcolor="black"></td><td bgcolor="black"></td><td bgcolor="black" align=center><font color="white" size=-1><input type="text" size=3 name="TotalQty"></td><td bgcolor="black"></td><td bgcolor="black"><font color="white"><strong>Total:</strong></td><td bgcolor="black"><font color="white" size=-1>$<INPUT TEXT
NAME="total" SIZE=5 value="0"  onFocus="check_all(this.form)"
onBlur="check_all(this.form)"></td>
                  </tr>
            </table>

<input type="submit" name="todo" value="Submit">
0
 
LVL 9

Expert Comment

by:HamdyHassan
ID: 8107694
follow this

function CalcTotal()
{
    var total_price=0.00;
    total_dvd = parseFloat(document.Myform.field1.value) + parseFloat(document.Myform.field2.value) + parseFloat(document.Myform.field3.value) + parseFloat(document.Myform.field4.value) ;
   document.Myform.totalprice.value=total_price;
}


for sure you need loop and eval()



Question?

is the following working, I can't find where you pass "mnypice" to this function

<script language="JavaScript">
                         function check_quan(form, j, mnyPrice) {
                               eval("numQty" + j + " = parseInt(form.numQty" + j + ".value, 10)");
                               if (eval("numQty" + j + " < 0"))
                               {
                                  eval("form.numQty" + j + ".value = '0' ");
                                  eval("form.numQty" + j + "_dol.value = '0' ");
                                  form.reg_num.focus();
                                  return;
                               }
                               eval("form.numQty" + j + "_dol.value = mnyPrice * numQty" + j);
                         }
                   </script>
0
 

Author Comment

by:Renee_J
ID: 8108552
?

I'm not worried about the calculating of the quantity total right now since I can't get the basic function of my javascript working (the one that calculates the money total of the extended dollar amounts).  Something is wrong with my above javascript that is causing it not to calculate the money total.

In specific, I think something is wrong with this exact section, but I am not sure...

      function check_all(form) {
        var recCount = #getProductCompany.recordCount#;
        form.total.value = 0;
        for (i = 1; i <= recCount; i++)
        {
            eval("check_quan(form, i, form.mnyPrice" + i + ".value)");
            form.total.value += Number(eval("form.numQty" + i + "_dol.value, 10"));
        }
     }

The total keeps showing up as this bizarre long number - something like 001100101010101101.  Do you see anything wrong with this code?

-Katie
0
 
LVL 11

Accepted Solution

by:
hart earned 400 total points
ID: 8109155
As far as i can understand from your posting is that you have dynamic fields say numQty1,numQty2 etc.. and mnyPrice1,mnyPrice2...

i will put in an example code by which numQty will be multiplied mnyPrice and total of all will be given in the last text box "total"

Also i will keep the total text box disabled so that no body can enter any value into this

You can use this example and modify ur code accordingly

<HTML>
<HEAD>
<TITLE>Have fun</TITLE>
<SCRIPT language="JavaScript">
function check_all()
{
     var recCount = 5; //this will be replaced by your record count
     var total  
     total = 0;
    for (i = 1; i <= recCount; i++)
    {
          eval("document.frmOrderForm.numQty"+i+"_dol").value = eval("document.frmOrderForm.numQty"+i+".value") * eval("document.frmOrderForm.mnyPrice"+i+".value");          
         total =  total + Number(eval("document.frmOrderForm.numQty"+i+"_dol.value"));
    }
     document.frmOrderForm.total.value = Number(total);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM method="post" name="frmOrderForm">
     <TABLE border="1" width="790">
          <TR>
               <TH bgcolor="##000000"><FONT size="-1" color="white">Carton Qty Ordered</TH>              
               <TH bgcolor="##000000"><FONT size="-1" color="white">Unit Price Per Carton</TH>
               <TH bgcolor="##000000"><FONT size="-1" color="white">Extended Price</TH>
          </TR>
          <!--- Here this will be replaced by your query loop--->
          <CFLOOP FROM="1" TO="5" INDEX="LOOP_INDEX">    
               <CFSET mnyPrice = LOOP_INDEX * 5><!--- just like that you already will be getting this value from the query --->                    
               <CFOUTPUT>
                    <TR>
                         <TD align=center><FONT size="-1"><INPUT type="text" name="numQty#LOOP_INDEX#" value="0" onFocus="check_all()" onBlur="check_all()" size="3"></TD>                    
                         <TD><FONT size="-1">#DollarFormat(mnyPrice)#<INPUT type="hidden" name="mnyPrice#LOOP_INDEX#" value="#mnyPrice#"></TD>
                         <TD><FONT size="-1">$<INPUT text name="numQty#LOOP_INDEX#_dol" size="5" value="0" onFocus="check_all()" onBlur="check_all()"></TD>
                    </TR>    
               </CFOUTPUT>          
          </CFLOOP>
          <TR>
               <TD bgcolor="black" align=center><FONT color="white" size="-1"><INPUT type="text" size="3" name="TotalQty"></TD>              
               <TD bgcolor="black"><FONT color="white"><STRONG>Total:</STRONG></TD>
               <TD bgcolor="black"><FONT color="white" size="-1">$<INPUT text name="total" size="5" value="0" DISABLED></TD>
          </TR>
     </TABLE>
     <INPUT type="submit" name="todo" value="Submit">
</BODY>
</HTML>

Kindly copy paste this code in a file and execute it and check it out.

I think this should solve your problem

let me know
0
 
LVL 11

Expert Comment

by:hart
ID: 8109179
Also my guess is that your addition isn't taking place, so all the values are getting appended instead of getting added.

This is w.r.t your code. (001100101010101101)
So all you have to do is check your addition or check my code and do the appropriate changes

Regards
Harish(hart)
0
 

Author Comment

by:Renee_J
ID: 8113711
Thanks Hart, that was exactly what I needed and it fixed my problem right up!  I really appreciate it!
0

Featured Post

Building an interactive eFuture classroom

Watch and learn how ATEN provided a total control system solution including seamless switching matrix switch, HDBaseT extenders, PDU, lighting control to build an interactive eFuture classroom.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A web service (http://en.wikipedia.org/wiki/Web_service) is a software related technology that facilitates machine-to-machine interaction over a network. This article helps beginners in creating and consuming a web service using the ColdFusion Ma…
Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question