Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

Looping over Javascript- Quick Help Anyone?

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
Renee_J
Asked:
Renee_J
  • 4
  • 4
  • 2
1 Solution
 
HamdyHassanCommented:
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
 
Renee_JAuthor Commented:
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
 
HamdyHassanCommented:
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
HamdyHassanCommented:
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
 
Renee_JAuthor Commented:
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
 
HamdyHassanCommented:
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
 
Renee_JAuthor Commented:
?

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
 
hartCommented:
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
 
hartCommented:
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
 
Renee_JAuthor Commented:
Thanks Hart, that was exactly what I needed and it fixed my problem right up!  I really appreciate it!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now