form data

The answer is actually shared by all of you. I ran the function again using Ian's test code and BKBK's identification of the select reference. It is working, now.
Thank you all for hanging in there with me.

function total()
{
var field1 = document.getElementById("DUP").value;
var field2 = document.getElementById("COPIES").value;
var field3 = document.getElementById("ORIG").value;
var field4 = document.form2.paperlist.value;
if(field1!=0)
document.getElementById("mytotal").value = parseInt(field2) *
parseInt(field3)/2 * parseFloat(field4);

else
document.getElementById("mytotal").value = parseInt(field2) *
parseInt(field3) * parseFloat(field4);

}

After all the posts above this is what I have put together. The function works until I try to use the selected item in 'paperlist'. As there are two fields in 'paperlist' being output I only need to reference single_side in the function. I dont' see how this code does that. So, I removed #paperlist.descr# from the select output but this code still does not work. I'm sure I misinterpreted something in the posts...but not sure what.

I also used Ian's test code in total( ) which works until I try to reference the selected item in paperlist.

Any ideas on what I'm doing wrong?
<script type="text/javascript">

function total(mytotal,document.form2.paperlist.value)
{
var field1 = document.getElementById("DUP").value;
var field2 = document.getElementById("COPIES").value;
var field3 = document.getElementById("ORIG").value;
var field4 = document.form2.paperlist.value;
if(field1!=0)
document.getElementById("mytotal").value = parseInt(field2) *
parseInt(field3)/2 * parseInt(field4);

}
</script>
----------------------------------------------------------------------------------------------
<select name="paperlist" id="paperlist" >
<cfoutput query="paperlist">
<option value="#paperlist.descr# #paperlist.single_side#">#paperlist.descr# #paperlist.single_side#</option>
</cfoutput>
</select>


<input type="text" name="COPIES" id="COPIES" onchange="total('copies',document.form2.paperlist.value)" accesskey="1" tabindex="1" default = "0" size = "10">

<input type="text" name="ORIG" id="ORIG" onchange="total('orig',document.form2.paperlist.value)" size="10" accesskey="2" tabindex="2" default= "0"/>

<input type="checkbox" name="DUP" id="DUP" accesskey="3" tabindex="3" >

<input type="text" name="mytotal" id="mytotal" readonly = "true" size="10" />

<input type="submit" name="submit" value="Submit" />

What if the variable single_sides is coming from cfquery where the listbox contains :
paperlist.descr,paperlist.paperid,paperlist.single_side,paperlist.two_side

When the user selects an item in the listbox and the form has not been submitted to the server can the javascript use the single_side variable?

another idea



afterthought : cfparam for the form variables unnecessary

You could do that, but if you notice that when the calculated value is
put into the form element for the user to see with the JavaScript, and
then the form is submitted, the calculated value is passed to the server
with all the other form values. You could easily use this value
straight from the form structure and not recalculate if you like. In my
example it is passed as "form.totalField".

This would depend on the actually requirements of your project so it is
an option.

Deb3 wrote:
> Thank you. This is helpful. I'm starting to get it I think. If I want to have
> the user see the calculation results before submitting I have to use this
> javascript in addition to the cfscript function which makes it available to the
> server for updating the database?
>

Thank you. This is helpful. I'm starting to get it I think. If I want to have the user see the calculation results before submitting I have to use this javascript in addition to the cfscript function which makes it available to the server for updating the database?

Here is some test code.

I ran into a issue that may be the cause of your latest problem. If you
look at the <input ...> tags you will see that each one has a 'name' and
an 'id' parameter. The id parameter is what the javascript uses to do
it's calculations. The name parameter is what provides the filed to the
coldfusion when it is submitted. So you need to use both in this
instance, or rewrite the javascript to use the name parameter instead of
the id parameter.

For this latter your javascript is going to use calls that look
something like this. It is a little less desirable because it relies on
the structure of the page, and if you latter change the structure, you
have to change these javascript code lines.

document.forms[0].fieldOne

<cfsilent>
<cfif isDefined("form.Submit")>
<!--- Server action code. This code only runs on the server after the
form has been submitted. --->

<cfset serverVariable = form.fieldOne + form.fieldTwo>

<cfif serverVariable EQ form.totalField>
<cfset outputMessage = "Server Total equals total submitted with form.">
<cfelse>
<cfset outputMessage = "Server Total does not equal total submitted with
form, this is wierd but possible.">
</cfif>

</cfif>
</cfsilent><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Client/Server Demo</title>
<script type="text/javascript">
/* This is a JavaScript function to provide client side UI enhancement */
function total()
{
var field1 = document.getElementById("fieldOne").value;
var field2 = document.getElementById("fieldTwo").value;

document.getElementById("totalField").value = parseInt(field1) +
parseInt(field2);
}
</script>
</head>

<body>
<h1>Client/ServerDemo</h1>

<form method="post">
<input type="text" name="fieldOne" id="fieldOne" onchange="total();" />
<input type="text" name="fieldTwo" id="fieldTwo" onchange="total();" />
<input type="text" name="totalField" id="totalField" readonly="true" />
<input type="submit" name="submit" value="Submit" />
</form>

<cfif isDefined("outputMessage")>
<h2><cfoutput>#outputMessage#</cfoutput></h2>
</cfif>

<cfif isDefined("form.Submit")>
<cfdump var="#form#"> <!--- Dumps the form scope because we used a
method="post" in the form tag. --->
</cfif>
</body>
</html>


Deb3 wrote:
> Allot has been clarified in this thread. Still, my form is not passing the user
> entries to the function. <CFDump> produces [empty string] for all user entries.
> I want to make this form self submitting so that the user sees the line cost
> without hitting a submit button. So I made this form be its own action page.
>
> <cfform>
> <form action="#calc.cfm#" method="post"
>
> Is there something else I need to do to make the user entries available to the
> function?
>

Unless "calc.cfm" is some kind of strange structure variable, and not
the name of the file, remove the pound signs #.

Second, are you dumping the form scope or the url scope? With a
method="post" you should be dumping the form scope on the calc.cfm page.

You can not make a form "self submitting" so that server side
functionality is run, without using a submit event. You can use
JavaScript to create other actions that create a submit event, but a
submit event will have to occur.

I believe you are still mixing up your client side logic and your server
side logic.

On the client side use JavaScript to enhance the User Interface with
updated calculations, basic validation, other actions helpful to a user.

When the user has completed the form, with the help of the JavaScript
enhancements, the form is submitted to the server.

On the server you use ColdFusion to do final validation, other behind
the scenes calculations and data storage actions. IE. commit the data to
a database or text file or email or whatever.

Deb3 wrote:
> Allot has been clarified in this thread. Still, my form is not passing the user
> entries to the function. <CFDump> produces [empty string] for all user entries.
> I want to make this form self submitting so that the user sees the line cost
> without hitting a submit button. So I made this form be its own action page.
>
> <cfform>
> <form action="#calc.cfm#" method="post"
>
> Is there something else I need to do to make the user entries available to the
> function?
>

Allot has been clarified in this thread. Still, my form is not passing the user entries to the function. <CFDump> produces [empty string] for all user entries. I want to make this form self submitting so that the user sees the line cost without hitting a submit button. So I made this form be its own action page.

<cfform>
<form action="#calc.cfm#" method="post"

Is there something else I need to do to make the user entries available to the function?

I decided to use javascript
<cfscript> is Coldfusion, not Javascript. For Javascript, use

<script type="text/javascript">
<!--
function lcost(var1, var2, var3, var4)
{
var total = 0;
if ( var1 == "yes") total= var2 *(var3/2)* var4;
return total;
}
// -->
</script>