passing form field names 1

[jwdcfdeveloper]

I am working on some javascript that assigns dynamic field names and values. I use the dynamic values to calculate a price, which works, but the price changes by the checked amount (except zero) whehever a user checks or unchecks the field. I want to be able to add the form field name with the checked attribute. Unfortunately, I don't know how to get and use the form field name.

I want to do something like this:
<script>
function total(cost, formfield) {
var total = cost.value;
var nameOfField = //someway to get convert formfield to the name of the form field
var current = document.frmName.totalCost.value;

if(total != 0 && document.frmName.nameOfField.checked) {
//add up totals
}
}
</script>

If anyone has a better way of doing this or knows how to pass and use the name of a dynamically generated name, I'd appreciate it.

 

[CoffeeQuick]

Hi,

If the name of the formfield is set in the HTML then you can retrieve it as below

var nameOfField = formfield.name;

or if you are looking to assign the name via javascript then use the following

formfield.name = "some name";

Hope this helps

John

 

[CoffeeQuick]

Also i think you will need to change the following line of code

from

if(total != 0 && document.frmName.nameOfField.checked) {

to

if(total != 0 && document.forms[frmName].elements[nameOfField].checked) {

Although I havn't checked this out for this situation.

 

[jwdcfdeveloper]

It doesn't work yet and here's why:

I can get the name via the formfield.name value, but if I try to use the variable:
var nameOfField = formfield.name;
and use this in my if statement:
document.forms[frmName].elements[nameOfField].checked

I get an error everytime. Something to the effect that it is either null or not an object. I tried making the names similar except putting a number in the name to make each name different (e.g. myVar1, myVar2, etc). I tried looping over the values substituting i for the actual last part of the form field name. Here's what it looks like:

for(var i = 1; i< 5; i++) {
if(newCost != 0 && document.frmCC.myVar.checked) {
document.frmCC.Charged_Amount.value = total;
}
}

This doesn't work either because the code ignores the part. In fact I get an error saying "document.frmCC.myVar.checked is null or not an object". I think I am close but am not sure how to proceed. Let me know what any of you all think.

 

[Annelize]

Hi,

Post the calling of the function here please. It might not send the right value in the first place or there might just be a syntax error.

Also, check the source code and see what gets send through to the javascript...

A

 

[jwdcfdeveloper]

Here's the call:

<INPUT TYPE="checkbox" NAME="Additional_Course_Charge#qGetMyEvents.currentRow#" VALUE="#qGetMyEvents.event_cost#" onClick="calculate(this);">

I am using this.name to get the name field, I tried using this.name in the call and it didn't work. I have checked the code and the name of the field does get passed, but I can't use it for anything other than display purposes, which I don't need.

 

[MOrac]

document.frmCC.myVar\ won't do what you want - you would need document.frmCC['myVar' + i] to get the effect you were aiming for.

However, I'd find your whole approach risky. It seems that you're not aiming to calculate the total when updating it, but only to add or subtract the value associated with each checkbox to an unverified running total. It's quite possible to click or button-press in such a way that a box double-enters - i.e. so that the first change in state never manages to fire off an event before the second event overrides it. Doing this would cause either serial addition or subtraction of the cost value. Good code should calculate the total value with each form change.

 

[Annelize]

How about sending the actual name instead of this.name

<INPUT TYPE="checkbox"   NAME="Additional_Course_Charge#qGetMyEvents.currentRow#" VALUE="#qGetMyEvents.event_cost#" onClick= "calculate('Additional_Course_Charge<%=qGetMyEvents.currentRow%>');">

A

 

[cLFlaVA]

Here is an exceprt from the w3 standards for HTML:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

read more

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[jwdcfdeveloper]

However, I'd find your whole approach risky. It seems that you're not aiming to calculate the total when updating it, but only to add or subtract the value associated with each checkbox to an unverified running total. "

MOrac,
If you have a better way then let me know. All I'm trying to do is add/subtract to/from a predefined total that comes from a database. I'm no javascript genius by no stretch, so if there is a safer more efficient way of doing the update, then let me know

 

[MOrac]

I'm not trying to be rude, just to point out a danger in only modifying an end-value. If you simply perform a full calculation whenever there is a change to the form which can alter that calculation (i.e. whenever you'd run your current code anyway), you'll be working with guaranteed result data. The only thing that entails is being able to locate all the values on the form that you need to consider from your calculation function. If you provide the html, I'll promise to provide some script ;-)

 

[jwdcfdeveloper]

OK MOrac,

Here's the HTML code:

<cfif qGetMyEvents.recordCount gt 0>
<cfloop query="qGetMyEvents">
<p>Would you also like to register for the optional <b>#qGetMyEvents.meeting_detail_name#</b> for #DollarFormat(qGetMyEvents.event_cost)#?</p>

<INPUT TYPE="checkbox" NAME="Additional_Course_Charge#qGetMyEvents.currentRow#" VALUE="#qGetMyEvents.event_cost#" onClick="calculate(this);"> Yes - Register me for <b>#qGetMyEvents.meeting_detail_name#</b><br><br>
</cfloop>
<INPUT TYPE="hidden" NAME="Course_Charge" VALUE="#registration_fee#" onChange="calculate(this.form, this.name);">
<cfelse><INPUT TYPE="hidden" NAME="Course_Charge" VALUE="#registration_fee#" onChange="calculate(this.form);">
</cfif>

<p>$<textarea cols=5 rows=1 NAME="Charged_Amount" VALUE="#registration_fee#" onChange="calculate(this.form, );" readonly style="overflow:hidden">#registration_fee#</textarea> will be charged to your credit card.</p>


I am using CFMX to get the variable values from a database, let me know if that is enough to get you going with this, and thanks.

 

[MOrac]

So, here's the promised javascript:

<script language="Javascript" type="text/javascript">
function calculate(e) {
 var i, t = 0.00;

 if (e && e.form && e.form.elements) {
  for (i in e.form.elements) {
   if (e.form.elements[i] && e.form.elements[i].type && e.form.elements[i].value) {
    if (e.form.elements[i].type == 'hidden' || (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked)) {
     t += parseFloat(e.form.elements[i].value);
    }
   }
  }
  i = String(t).indexOf('.');
  if (i < 0) {
   t += '.00';
  } else if (i == String(t).length - 2) {
   t += '0';
  }
  if (document.getElementById && document.getElementById('Total_Charge')) {
   document.getElementById('Total_Charge').innerHTML = t;
  } else if (document.all && document.all['Total_Charge']) {
   document.all['Total_Charge'].innerHTML = t;
  }
 }
}
</script>

<form [i]options[/i]>

<cfif qGetMyEvents.recordCount gt 0>
<cfloop query="qGetMyEvents">
 <p>Would you also like to register for the optional  <b>#qGetMyEvents.meeting_detail_name#</b> for #DollarFormat(qGetMyEvents.event_cost)#?</p>
                    
<INPUT TYPE="checkbox" NAME="Additional_Course_Charge#qGetMyEvents.currentRow#" VALUE="#qGetMyEvents.event_cost#" onClick="calculate(this);" /> Yes - Register me for   <b>#qGetMyEvents.meeting_detail_name#</b><br><br>        
</cfloop>
            <INPUT TYPE="hidden" NAME="Course_Charge" VALUE="#registration_fee#" />
            <cfelse><INPUT TYPE="hidden" NAME="Course_Charge" VALUE="#registration_fee#" />
        </cfif>
        
<p>$<span id="Total_Charge">#registration_fee#</span> will be charged to your credit card.</p>

</form>

It's a quick and dirty hack to get a 2-figure dollar/cent precision; I'm sure there are better ways to do this, but I'm running late. I changed the textarea into an inline span tag as it looks nicer Only the checkboxes need the onClick event.