Forums

Joomal 3.4.0
Chronoforms5 v5.0.8

Event Registration Payment.
User selects one of two options (member ($3) or non-member ($5)) and then enters the number of guests that will also attend. The totalDue is supposed to calculated and displayed (either as member "$ 3 * x = totalDue" or "$5 * x = totalDue) and then displayed in a text box. They are then re-directed to PayPal.

The scenario above works well ONLY for the FIRST item listed in the radio button array. Choosing the second option is ignored.

I've cobbled together some JS using bits and pieces from the forum. I suspect that I'm not handling the array as I should. Any suggestions?

Code placed in the Load Javascript (above HTML (Render Form)):

  window.addEvent('domready', function() {
      $('guestNum').addEvent('keyup', calc);
      $('mbrType').addEvent('click', calc);
    });
    function calc() {
      var price = $('mbrType').value;
      var quantity = $('guestNum').value;
      if ( price > 0 && quantity > 0 ) {
        $('totalCost').value = price * quantity;
      }
    }  
    

"guestNum" is the number of accompanying guests entered by user
"mbrType" is the selected radio button option

Hi gChambers,

There are some problems with the script

+ it looks like MooTools - with Joomla! 3 you are better using jQuery syntax.

+ the addEvent selectors work on the id of the input and you don't have one linked to the id of the second radio button. Similarly the calc function needs to find the selected button value.

Please try this version

jQuery(document).ready(function(jQ){
  jQ('#guestNum').keyup(calc);
  jQ('#mbrType').click(calc);
  jQ('#mbrType1').click(calc); //check the id for the second button

  function calc() {
    var price = jQ('input[name=mbrType]:checked').value;
    var quantity = jQ('#guestNum').value;
    if ( price > 0 && quantity > 0 ) {
      jQ('#totalCost').value = price * quantity;
    }
  }
});

!! Not tested and may need debugging !!

Bob

You'll have to forgive me as I'm a total JS newbie. Unfortunately, the code above does not function at all.
Perhaps the issue is my not specifying the ID for "mbrType1"? Guess.
I can see only one field in radio button "Edit element settings" -- "Field ID" which is set to "mbrType". Where would I set the ID for the 2nd option?
In any case, no amount is displayed in the "Total Cost" field (#totalCost).
However, the correct mbrType, quantity and totalCost IS sent to Paypal.
I think that we're very close.

Update: using Chrome Developer Tools I now see that the two radio buttons have been assigned #mbrType and #mbrType1.
However, still need some assistance in getting the calculated total to display in the Total Cost field.Thanks.

Hi Bob,
I created four elements in my form so named:
1. text box first
2. text box second
3. button
4. text box third (where I want to show the result)

I inserted this js code (copied by your hint) in On Load form above the HTML Render Form
******************************************
jQuery(document).ready(function(jQ){
jQ('#first').click(calc);
jQ('#second').click(calc);
jQ('#button').click(calc);

function calc() {
var tot1 = jQ('#first').value;
var tot2 = jQ('#second').value;
if ( tot1 > 0 && tot2 > 0 ) {
jQ('#third').value = tot1 + tot2;
}
}
});

******************************************
After push button ine field 'third' didn't show nothing.
Any ideas?
I have to insert something else?

Thanks

Kiwiup

Hi gChambers,

Check the form HTML in the Code box or using your browser's web developer tools to check what IDs have (or haven't) been set for the radio buttons. If you set one for the group I think that ChronoForms uses that for the first one, then adds 1, 2, 3. . . to the end for the later buttons.

Make sure that you have ids set for each of the elements.

I can't see where the 'no amount' message would come from though.

Bob

>> I can't see where the 'no amount' message would come from though.

Misunderstanding. Not text "no amount" -- just that nothing is displayed in the total amount field. That field was populated with numbers with the code originally used (see top of this thread).

>> using your browser's web developer tools to check what IDs have (or haven't) been set for the radio buttons

It appears that "mbrType" and "mbrType1" have been set as IDs for the "input".

<div class="form-group" id="form-row-mbrType"><label for="mbrType" class="control-label">Membership Type</label>
<div class="gcore-input-wide gcore-display-table" id="fin-mbrType"><div class="gcore-single-column" id="fclmn"><div class="gcore-radio-item" id="fitem"><label class="control-label" for="mbrType"><input name="mbrType" id="mbrType" value="3" class=" validate['group:60']" title="" style="" data-load-state="" data-tooltip="" type="radio" />CABAA Member: $3.00</label></div>
<div class="gcore-radio-item" id="fitem1"><label class="control-label" for="mbrType1"><input name="mbrType" id="mbrType1" value="5" class=" validate['group:60']" title="" style="" data-load-state="" data-tooltip="" type="radio" />Non-Member: $5.00</label></div></div><span class="help-block">

Hi gChambers,

By all means email or PM me the site URL, the form name, and a SuperAdmin login and I'll take a quick look. It's dinner time here so it may not be until tomorrow morning though.

Bob

Very good. I've got the form set up on a development site and will PM the log-in to you. Thanks for staying with this. Will be very cool when behaving properly.

Hi gChambers,

It's working now. The final tweaked version of the JavaScript was this - the first few lines are there to force the JQuery library to load.

<?php
JHtml::_('jquery.framework');
?>

jQuery(document).ready(function(jQ) {
  jQ('#guestNum').keyup(calc);
  jQ('#mbrType').click(calc);
  jQ('#mbrType1').click(calc); //check the id for the second button

  function calc() {
    var price, quantity, total;
    price = jQ('input[name=mbrType]:checked').val();
    quantity = jQ('#guestNum').val();
    total = 0;
    if ( price > 0 && quantity > 0 ) {
      total = parseInt(price) * parseInt(quantity);
    }
     jQ('#totalCost').val(total);
  }
});

Bob

Thanks Bob.
The new code snippet works great. I'm sure it will be useful to others on the forum as well.
Have happily bought you a cup of coffee.

Somewhat off-topic question:
Could have the plugin "jQueryEasy" have been used to call automatically jQuery instead of using the PHP snippet? Not a big deal, just curious.

Hi gChambers,

Short answer - Yes, and I'd use jQueryEasy on a site of my own.

The longer answer. The snippet that I added fixes a timing problem where the jQuery snippet is loaded before the jQuery library. For some reason I've never dug into Joomla! doesn't handle this very well or reliably. (WordPress does it much better.) Probably the only thing it changes is the timing so it's pretty safe to use.

jQueryEasy does much more. As well as the timing it it checks for other versions of jQuery being loaded and blocks them so you only get one (I think that even works to block the CF GECore load). It also allows you to specify the version being loaded and the source - so if you use a fairly recent copy from a common library - like Google - there's a very good chance that many users will already have it cached in their browser.

Bob