...I'm writing a CF app. for a client that wants to be able to have his input
form look exactly like his invoice. Because of this, the form on the page HAS
to be an HTML form. (it would be nearly impossible for me to make a flash form
look the way they need it to) However, the form also needs to have a flash grid
to display the work done and the grid needs to update the totals in the last
field of the grid based on quantity and price. Also, the entire total from the
grid needs to be updated in the subtotal field. I managed to find some good
code here:
"http://www.asfusion.com/blog/entry/adding-the-values-of-a-cfgrid-column";. This
code works fine on it's own (probably because it's all in one flash form) but
when I try to incorporate it into the app., it won't show the grid at all on
the page. (because the form is an HTML form and the grid is a Flash grid) My
"solution" was to create 3 separate forms on the page, 2 HTML forms for the
regular input fields and one flash form in between them to supply the flash
grid and I'm using JavaScript to compile the controls from all of the forms to
create a new form containing all of the fields and submitting it. Well, that
ALMOST works. Only some of the fields are getting sent to the processing page
and NONE of the flash form fields are being sent. Also, I can't get the
subtotal field to accept the variable that the JavaScript created that contains
the total of all rows because the variable can't be passed from one form to
another on the same page. (especially passing it from a Flash form to an HTML
form)
Here's the JavaScript that updates the last column in the grid and calculates
the total:
<cfscript>
products=queryNew("");
names="";
amount=0;
price=0;
quantity=0;
queryaddcolumn(products,"name",listtoarray(names));
queryaddcolumn(products,"amount",listtoarray(amount));
queryaddcolumn(products,"quantity",listtoarray(quantity));
queryaddcolumn(products,"price",listtoarray(price));
</cfscript>
<cfsavecontent variable="calculateTotal">
var totalAmount = 0;
var item;
var subTotal = 0;
for(var i = 0; i < cart.length; i++) {
item = cart.getItemAt(i);
subTotal = number(item['price']) * item['quantity'];
totalAmount += subTotal;
cart.editField(i, 'amount', subTotal);
}
total.text = totalAmount;
</cfsavecontent>
Here's the script that compiles the 3 forms into 1 and submits it:
<script language="JavaScript" type="text/javascript">
/* Function: add all elements from ``frmCollectFrom´´ and append them to
``frmCollector´´ before returning ``frmCollector´´*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
for(var ix = 0 ; ix < frm.length ; ix++)
frmCollector.appendChild(frm[ix]);
return frmCollector;
}
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
var arrDocForms = document.getElementsByTagName('form');
var formCollector = document.createElement("form");
with(formCollector)
{
method="post";
action="processes/newprocess_manageproject.cfm";
name="formCollector";
id="formCollector";
}
for(var ix=0;ix<arrDocForms.length;ix++) {
appendFormVals2Form(arrDocForms[ix], formCollector);
}
document.body.appendChild(formCollector);
formCollector.submit();
}
</script>
And here are the 3 forms I'm using on the page:
<cfform name="myForm1" format="html" width="850" height="250">
<table width="829" border="0" align="center" cellpadding="2" cellspacing="2">
<tr>
<td width="158" rowspan="2" align="left" valign="top"><img
src="images/mainlogo.jpg" width="158" height="151" /></td>
<td colspan="3" align="left" valign="top"><span
class="style21"><u>#qCompanyInfo.CompanyName#</u></span></td>
</tr>
<tr>
<td colspan="2"><span class="style12">#qCompanyInfo.CompanyAddress#<br
/>#qCompanyInfo.CompanyCity#, #qCompanyInfo.CompanyState#
#qCompanyInfo..CompanyZip#<br />#qCompanyInfo.CompanyPhone#</span><br /><span
class="style15">#qCompanyInfo.CompanyWebsite#</span></td>
<cfif IsDefined("url.vid")><td width="100" align="right"
valign="top"><table align="right" width="110" border="0"
class="style3"><tr><td><span class="style3"
style="text-align:right;">#qVehicle.VehicleYear#<br />#qVehicle.VehicleMake#<br
/>#qVehicle.VehicleModel#</span></td></tr></table></td></cfif>
</tr>
<tr height="60">
<td colspan="3" align="left" valign="top"><div class="style2"
style="float:left; clear:left; width:610px; text-align:center"><u>"We'll fix it
right and save you money too!"</u></div>
</td>
<td width="154" valign="bottom" class="style3">Project Name:<br /><cfinput
name="ProjectName" type="text" size="20"></td>
</tr>
</table>
<table width="800" border="0" align="center" cellspacing="2"
bordercolor="##0099FF">
<tr>
<td width="395" height="21" align="left" valign="bottom" class="style1">
Valued Customer:
</td>
<td width="395" align="left" valign="bottom" class="style1">Vehicle
Info:</td>
</tr>
<tr>
<td height="140" valign="top" bordercolor="##0FF">
<table width="100%" height="220" border="1" bordercolor="##0099FF">
<tr>
<cfif IsDefined("url.id")>
<td width="400" align="left" valign="top" class="monkeythink">
<div class="jtextfill" style="width:390px; height:67px; float:left"><span
class="dyntextval style14">#qClient.CustomerName#</span></div>
</div>
<div style="width:400px; height:25px; clear:left">
<div class="style22" style="width:70px; height:32px;
float:left">Address:</div><div class="style22" style="width:330px;
float:left">#qClient..Address#</div>
</div>
<div class="monkeythink" style="width:400px; height:25px; clear:left">
<div class="style22" style="width:70px; height:32px;
float:left">City:</div><div class="style22" style="width:140px;
float:left">#qClient.City#</div><div class="style22" style="width:50px;
height:32px; float:left">State:</div><div class="style22" style="width:40px;
height:32px; float:left">#qClient.Region#</div><div class="style22"
style="width:40px; height:32px; float:left">Zip:</div><div class="style22"
style="width:60px; height:32px; float:left">#qClient.PostalCode#</div>
</div>
<div style="width:400px; height:25px; clear:left">
<div class="style22" style="width:70px; height:30px;
float:left">Phone:</div><div class="style22" style="width:140px; height:32px;
float:left">#qClient.Phone#</div><div class="style22" style="width:55px;
height:32px; float:left">Cell:</div><div class="style22" style="width:130px;
height:32px; float:left">#qClient.Fax#</div>
</td>
<cfelse>
<td align="left" valign="top">
<span class="style22">Customer: <cfinput name="CustomerName" type="text"
size="45"></span><br>
<span class="style22">Address:<br /><cfinput name="Address" type="text"
size="60"></span><br />
<span class="style22">City: <cfinput name="City" type="text"
size="25"></span><br />
<span class="style22">State: <cfinput name="Region" type="text"
size="15"></span><br>
<span class="style22">Zip Code: <cfinput name="PostalCode" type="text"
size="25"></span><br>
<span class="style22">Phone: <cfinput name="Phone" type="text" size="12"
validate="telephone" mask="(999) 999-9999"> | Cell/Other: <cfinput name="Fax"
type="text" size="12" validate="telephone" mask="(999) 999-9999"></span>
</td>
</cfif>
</tr>
</table>
</td>
<td valign="top">
<table width="100%" height="220" border="1" bordercolor="##0099FF">
<tr>
<td>
<cfif IsDefined("url.vid")>
<table width="400" cellpadding="2" cellspacing="2">
<tr>
<td>
<table height="166" width="400" border="0">
<tr>
<td width="67" align="left" valign="bottom" class="style18">Date:</td>
<td colspan="3" align="left" valign="bottom" class="style17"><cfinput
name="ProjectDate" type="text" size="25" value="#DateFormat(Now(),
'mm/dd/yyyy')#"></td>
</tr>
<tr>
<td align="left" valign="bottom" class="style22">Vehicle:</td>
<td colspan="3" align="left" valign="bottom"
class="style22">#qVehicle.VehicleYear# #qVehicle.VehicleMake#
#qVehicle.VehicleModel#</td>
</tr>
<tr>
<td align="left" valign="bottom" class="style22">Color:</td>
<td width="133" align="left" valign="bottom"
class="style22">#qVehicle.VehicleColor#</td>
<td width="67" align="left" valign="bottom" class="style22">Engine:</td>
<td width="115" align="left" valign="bottom"
class="style22">#qVehicle.VehicleEngine#</td>
</tr>
<tr>
<td align="left" valign="bottom" class="style22">Mileage:</td>
<td align="left" valign="bottom" class="style22"><cfinput type="text"
size="20" name="Mileage" id="Mileage" value="#qVehicle.VehicleMileage#"></td>
<td align="left" valign="bottom" class="style22">Plate:</td>
<td align="left" valign="bottom"
class="style22">#qVehicle.VehicleLicenseNumber#</td>
</tr>
<tr>
<td align="left" valign="bottom" class="style22">VIN:</td>
<td colspan="3" align="left" valign="bottom"
class="style22">#qVehicle.VehicleVIN#</td>
</tr>
</table></td>
</tr>
</table>
<cfelse>
<span class="style22">Project Date: <cfinput name="ProjectDate"
type="text" size="25" value="#DateFormat(Now(), 'mm/dd/yyyy')#"></span><br />
<span class="style22">Year: <cfinput name="VehicleYear" type="text"
size="15"> Color: <cfinput name="VehicleColor" type="text" size="15"></span><br
/>
<span class="style22">Make: <cfinput name="VehicleMake" type="text"
size="30"></span><br />
<span class="style22">Model: <cfinput name="VehicleModel" type="text"
size="30"></span><br />
<span class="style22">Engine: <cfinput name="VehicleEngine" type="text"
size="30"></span><br />
<span class="style22">Mileage: <cfinput name="VehicleMileage" type="text"
size="15"></span><br />
<span class="style22">Plate: <cfinput name="VehicleLicenseNumber"
type="text" size="15"></span><br />
<span class="style22">VIN ##: <cfinput name="VehicleVIN" type="text"
size="40"></span>
</cfif>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="832" border="0" align="center">
<tr>
<td>
<table width="829" border="1" cellpadding="10" bordercolor="##0099FF"><tr><td
width="801" align="left" valign="top">
<span class="style5">I authorize Budget Transmission Center, LLC to perform
the repairs below and furnish necessary materials. I understand any cost quoted
is an estimate. Budget employees may operate the vehicle for inspection,
testing and delivery and may park the vehicle in the parking lot. Budget will
not be responsible for loss or damage to the vehicle or articles left in it, in
the case of fire, theft or any other reason not caused by Budget. Vehicles left
overnight are at owners risk. I understand that Budget is not assuming any
responsibility for theft or damage to the vehicle at any time when the vehicle
is not inside Budget's building or being driven by Budget. An express mechanics
lien is acknowledged on the above vehicle to secure payment for work performed
under a written repair estimate. I accept and do realize this is a non
cancelable contract and that by signing I have read all the terms on this
invoice. Storage will start 5 days after completion of work at $30.00 per day.
Abuse of any kind including getting stuck in snow will void warranty.</span><br
/>
<span class="style3">Signed: x
______________________________________________________________________</span></td></tr></table>
</td>
</tr>
</table>
</cfform>
</cfoutput>
<table width="700" align="center">
<tr>
<td>
<cfform name="myForm" format="flash" width="850" height="270">
<cfformgroup type="vBox">
<cfgrid name="cart" query="products" format="flash" width="820"
selectMode="edit" onchange="#calculateTotal#" insert="yes" delete="yes"
italic="no" bold="no" gridLines="yes" colHeaders="yes" colHeaderItalic="no"
colHeaderBold="yes" enabled="Yes" visible="Yes" rowheaders="no">
<cfgridcolumn name="quantity" header= "Qty." Select="Yes" type="numeric"
width="50" textcolor="##003366" bold="No" dataalign="left" headeralign="center"
headerbold="yes" headertextcolor="##003366">
<cfgridcolumn name="name" header="Description" Select="Yes" width="600"
textcolor="##003366" bold="No" dataalign="left" headeralign="center"
headerbold="yes" headertextcolor="##003366">
<cfgridcolumn name="price" header="Cost" select="Yes" width="100"
textcolor="##003366" bold="No" dataalign="left" headeralign="center"
headerbold="yes" headertextcolor="##003366">
<cfgridcolumn name="amount" header="Subtotal" type="currency"
dataalign="right" select="false" width="60">
</cfgrid>
<cfinput type="Text" name="total" visible="false"
disabled="true" size="5" style="disabledColor:Black; borderStyle:none;
fontWeight:bold;">
</cfformgroup>
</cfform>
</td>
</tr>
</table>
<cfform name="myForm2" format="html" width="850" height="250">
<table width="800" border="0" align="center">
<tr>
<td height="43" colspan="2" valign="top"><span class="style9">Warranty:
<cfinput type="checkbox" name="NinetyDay3000Mile" value="yes"
id="NinetyDay3000Mile">
90 Days/3,000 Miles
<cfinput type="checkbox" name="SixMonth6000Mile" value="yes"
id="SixMonth6000Mile">
6 Months/6,000 Miles
<cfinput type="checkbox" name="TwelveMonth12000Mile" value="yes"
id="TwelveMonth12000Mile">
12 Months/12,000 Miles</span><br />
<span class="style16">Notes:</span>
<br />
<cftextarea name="ProjectNotes" cols="65" rows="4" label="Notes"
style="text-align:left" height="65" width="375" value="Thank you from all of us
here at Budget Transmission Center!!!" />
</td>
<td width="100" colspan="2" rowspan="2" align="center" valign="middle">
<table align="right">
<tr>
<td><table border="0" align="right">
<tr align="right" height="15">
<td height="23" valign="top"><span class="style22"><cfinput
type="checkbox" name="Taxable" id="Taxable" value="checkbox"
checked="yes">Taxable? </span></td>
</tr>
<tr height="15">
<td align="right"><span class="style23"
style="text-align:right">Subtotal: </span></td>
</tr>
<tr height="15">
<td align="right"><span class="style23" style="text-align:right">CT
<cfoutput>#qCompanyInfo.SalesTax#</cfoutput>% Tax: </span></td>
</tr>
<tr height="15">
<td align="right"><span class="style23"
style="text-align:right">Deposit/Discount: </span></td>
</tr>
<tr height="25">
<td> </td>
</tr>
<tr height="15">
<td height="25" align="right" valign="bottom"><span class="style16"
style="text-align:right"><strong>Total:</strong> </span></td>
</tr>
</table></td>
<td><table width="45" align="right" border="1" bordercolor="##0099FF">
<tr align="right" height="15">
<td bgcolor="##66CCFF" width="40"> </td>
</tr>
<tr height="15">
<td bgcolor="##66CCFF" align="right" width="40"><span
class="style24" style="text-align:right"><cfinput type="Text" name="total"
disabled="true" size="15" style="background-color:##66CCFF; border:none;
border-style:none; text-align:right"> </span></td>
</tr>
<tr height="15">
<td bgcolor="##66CCFF" align="right" width="40"><span
class="style24" style="text-align:right"> </span></td>
</tr>
<tr height="15">
<td bgcolor="##66CCFF" align="right" width="40"><span
class="style24" style="text-align:right"><cfinput type="text" name="deposit"
id="deposit" size="15" style="background-color:##66CCFF; border:none;
border-style:none; text-align:right"></span></td>
</tr>
<tr height="15">
<td bgcolor="##66CCFF" width="40"> </td>
</tr>
<tr height="15">
<td bgcolor="##66CCFF" align="right" width="40"><span
class="style24" style="text-align:right; font-weight:bold"> </span></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="373" height="27" align="center" valign="top">
<cfinput name="AddProject" type="button" value="Add Job"
onclick="submitAllDocumentForms();">
<cfinput name="PrintInvoice" type="button" value="Print Invoice"
onclick="submitAllDocumentForms();">
<cfinput name="Cancel" type="button" value="Cancel"
onClick="window.location='index.cfm'">
</td>
</tr>
</table>
</cfform>
I've been pulling what little hair I have left out over this issue so naturally
any help anyone can give me would be GREATLY appreciated.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:350040
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
