Forums

Hi guys

I am trying to create a form with a multiplier component. In each multiplier, I have three fields of interest: a dropdown (which affects the $ rate, which I'm storing in a hidden field), a list of check boxes (which I want to count to give a # of nights) and a text box in which I want to show the resulting cost (it's a booking system for a community event). I want to make the calculations as people make changes, not after they have submitted, so they can see the costs they are committing to.

I have created the fields as:

Type - Name = registrant[##][type], id = regType##
Nights - Name = registrant[##][nights], id = regNights##
Cost - Name = registrant[##][cost], id = regCost##

I used the LoadJS component to create a function that can set the hidden Rate field as follows:

function setRegRate(reg) {
  var rate,type;
  type = $('#regType'+reg).val();
  switch( type ) {
  case "A": rate = 24; break;
  case "P": rate = 20; break;
  case "C": rate = 15; break;
  case "I": rate = 0; break;
  case "D": rate = 6; break;
  }
 $('#regRate'+reg).val = rate;
}

I then created an Event as follows:

On Change Value of registrant[##][type] Function setRegRate(##).

However this is not working, as the generated code for the events has the ## in it rather than something that will be row dependent.

I am new to CF, but have been a programmer for 30+ years. I suspect I am either barking up the wrong tree or seriously missing something here! I've scoured the Forums and the tutorials, but can't see anything to help (although I learned a lot form the new multiplier tutorial).

Any suggestions?

Regards
David

Hi David,

It's possible to do this but, as you've seen, not simple and straightforward. I wouldn't even try to do it using the built-in event handler - it's not built for this job. And there's the added complexity that multiplier rows can be edited added, deleted at any stage before the form is submitted.

I have a long - 250 line - script example that I can try and write into a FAQ or doc later. The essence of it is that I kept a list of active values of ## and used that to scan all the current entries in the multiplier and run the necessary script on them. Here is the core part of that - apologies if it is a bit cryptic. This function is using the same structure as in the FAQ and is called by the someFunction() line there:

  function updateGarments(){
    var i, quantity, max_quantity, g_id, diff, new_g_id_list;

    max_quantity = 100;

    /** There is a hidden input in the multiplier row
    with the class g_id that has the item number set as its value.
    We find all the current values here */
    g_id = jQ('#garment_multiplier :input').filter('.g_id');
    new_g_id_list = g_id.map(
      function(){
        return this.value;
      }
    ).get();
    // remove the hidden copy with the '##' index
    i = new_g_id_list.indexOf('##');
    if ( i != -1 ) {
      new_g_id_list.splice(i, 1);
    }
    // set the Item Count
    jQ('#item_count').text(new_g_id_list.length);

    // see what has changed from the saved list
    // if there is a value it is for the new row added.
    diff = jQ(new_g_id_list).not(g_id_list).get()[0];

    g_id_list = new_g_id_list;

    // remove any deleted garments
    garments = garments.filter(function( obj ) {
      id = obj.id.toString();
      var test = jQ.inArray(id, g_id_list);
      if ( jQ.inArray(id, g_id_list) > -1 ) {
        return true;
      } else {
        return false;
      }
    });

    // Hide the Add button if we've got to Max Quantity
    quantity = g_id_list.length;
    if ( quantity >= ( parseInt(max_quantity) ) ) {
      jQ('#garment_multiplier .multiplier-add-button').hide();
    } else {
      jQ('#garment_multiplier .multiplier-add-button').show();
    }

    if ( !diff ) {
      // there are no new garments
      calculateTotals();
      return false;
    }

    // add change changeColourOptions to the new Style drop-down
    jQ('#garment_'+diff+'_style').change({g_id: diff}, function(event) {
      style = event.currentTarget.value;
      target = jQ('#garment_'+diff+'_colour');
      colours = changeColourOptions(style);
      replaceOptions(target, colours);
    });

    // copy the new list into the saved list
    garment = {
      id: diff,
      style: '',
      price: 0,
      name: '',
      number: ''
    };
    garments.push(garment);

    calculateTotals();
  }

Notes:

+ my jQ is equivalent to the $ in your code.

+ the g_id value is set in a hidden input in a Custom Code element in the multiplier like this

<input type='hidden' name='g_id[##]' id='g_id_##' class='g_id' value='##' /> 

Bob

Thanks guys. I will look at this in detail and see what I can make of it.

Bob, as you've indicated, that's not what the event handler is indented for, which is what I rapidly came to the conclusion of myself. 🙂 I sort of see what you are doing in the code. But the question that comes to mind is "how to invoke the function?"

Perhaps I need to approach this differently. The workflow of the form is:
1. Obtain general registration details from the user
2. Allow registration of 1 or more persons, where the cost per person is determined from their type and the specific nights they are attending
3. Final total display and confirmation
4. Payment by Paypal (optionally)
5. Send email to the registrar

I've attached the form definition (I've only got to step 2 so far).

Am I approaching this correctly? Am I better off with a series of forms perhaps? I'm certainly open to the idea of refactoring the approach if I'm going down a path that is sub-optimal.

Kind regards
David