Forums

I love chronoforms!!!

I've been using it for a good while now with Joomla 1.5 and I have to say, in my opinion this is the best and most useful component made for Joomla. You guys have done an outstanding job with this component and the help provided on this forum is always second to none.

I'm trying to do something which I think is quite simple, but the solution has so far eluded me.

I have a hidden value on the form, it is the payment amount sent to Paypal when the form is submitted.

I have a tick box on the form, when this is ticked I want a fixed amount added to the price. So when the form is submitted, if this box is ticked, a flat amount is added to the hidden field value to give a total price to Paypal.

I know this can be done with javascript. I think it should be pretty simple. I've been trying for hours and I just can't figure out how to do it.

Do you have any suggestions for me?

You could try this code in a Load JS action on the OnLoad event:

window.addEvent('domready', function() {
    $$(document.formname.flagname).addEvent('change', function() {
        if (document.formname.flagname[1].checked) {
			document.formname.amount.value = document.formname.value - 0 + 5;
		} else {
			document.formname.amount.value -= 5;
		}
    })
});

flagname[1].checked is needed instead of flagname.checked, if you enabled ghost on the checkbox.

Strange costruct document.formname.value - 0 + 5 is needed because "value" is a string and not a number.

Hi artephius,

If the result is hidden then I suggest that you do the addition in the OnSubmit Before box after the from is submitted. There's no advantage in using JavaScript and there's a small security risk that someone may change the amount.

In general don't put anything in a hidden input unless you have to. Add it after submission instead.

Bob

Here is the form code I'm using:

<h3>Choose your advertisement size</h3>

<form action="" id="displayadform">

<table><tr><td align="center"><img src="images/stories/sizes/1-8_wide.jpg" /><br />
    
<input type="radio"  name="selectedad" value="businesscard"
    onclick="calculateTotal()" />
    <b>Business Card Size - 3.5" x 2"<br /> (€95)</b>

</td>
    
<td align="center">

<img src="images/stories/sizes/1-4_tall.jpg" /><br />
    <input type="radio"  name="selectedad" value="quarterofpage"
    onclick="calculateTotal()" />
    <b>1/4 Page Ad - 5"x 3.75 <br />(€185)</b>

</td>
    
<td align="center"><img src="images/stories/sizes/1-3_wide.jpg" /><br />
    
<input type="radio"  name="selectedad" value="thirdofpagewide"
    onclick="calculateTotal()" />
    <b>1/3 Page Wide - 10.5" x 3.25"<br />(€254)</b>

</td></tr></table>
    
    <br/>
<h3>Would you like us to design your advertisement?</h3>
    <p>
    <label for='includedesign' class="inlinelabel">
    Include Design(€30)</label>
    <input type="checkbox" id="includedesign" name='includedesign'
    onclick="calculateTotal()" />
   </p>
    <div id="totalPrice"></div>

</form>

Here is the javascript in On Load:

var theForm = document.forms["displayadform"];

var ad_prices = new Array();
ad_prices["businesscard"]=95;
ad_prices["quarterofpage"]=185;
ad_prices["thirdofpagewide"]=254;

// getAdSizePrice() finds the price based on the size of the ad.
// Take user's the selection from radio button selection
function getAdSizePrice()
{
    var adSizePrice=0;
    //Get a reference to the form id="displayadform"
    var theForm = document.forms["displayadform"];
    //Get a reference to the ad the user Chooses name=selectedad":
    var selectedad = theForm.elements["selectedad"];
    //Here since there are 3 radio buttons selectedad.length = 3
    //We loop through each radio buttons
    for(var i = 0; i < selectedad.length; i++)
    {
        //if the radio button is checked
        if(selectedad[i].checked)
        {
            //we set adSizePrice to the value of the selected radio button
            //i.e. if the user choose the 1/8 page ad we set it to 95
            //by using the ad_prices array
            //We get the selected Items value
            //For example ad_prices["quarterofpage".value]"
            adSizePrice = ad_prices[selectedad[i].value];
            //If we get a match then we break out of this loop
            //No reason to continue if we get a match
            break;
        }
    }
    //We return the adSizePrice
    return adSizePrice;
}

//designPrice() finds the design price based on a check box selection
function designPrice()
{
    var designPrice=0;
    //Get a reference to the form id="displayadform"
    var theForm = document.forms["displayadform"];
    //Get a reference to the checkbox id="includedesign"
    var includeDesign = theForm.elements["includedesign"];
    //If they checked the box set designPrice to 5
    if(includedesign.checked==true)
    {
        designPrice=30;
    }
    //finally we return the designPrice
    return designPrice;
}

function getTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var adPrice = getAdSizePrice() + designPrice();
    //display the result
    document.getElementById('totalPrice').innerHTML =
                                      "Total Price For Ad $"+adPrice;
}

Am I at all on the right track? I notice the total price is not displaying.

Any advice or pointers would be very appreciated.

OK, that script doesn't seem to work. For some reason the javascript is not showing the value for price which should be output here:

document.getElementById('totalPrice').innerHTML =
                                      "Total Price For Ad $"+adPrice;

inside the form here:

<div id="totalPrice"></div>

So, I think a better option is to use Bob's code from here:

http://www.chronoengine.com/forums.html?cont=posts&f=26&t=22171&p=71238&hilit=calculate+price#p71238

and modify it for my own purposes. I hope this works! I'm supposed to have this demo ready for presentation tomorrow. Of course I have budgeted for the cost of a license for Chronoforms in the price for the site, as they will probably prefer to have link-free pages. But this is the last bit I have to figure out so if I can get it working I'm free and clear and can maybe enjoy life for an hour before I have to hit the sack.

Thank you, Bob and Abletech, for your help and tips. If I'm missing anything else obvious or if anyone has any further advice I would be really grateful, even though I do enjoy figuring this stuff out for myself as much as possible. And a big thanks to everyone working on Chronoforms and providing assistance on the forums... it's hard to improve on Joomla but I find this component to be almost indispensable for any site that needs to offer an improved level of data interaction with site users.

Bob, your suggested code was the key in the end.

I got it working with the following html:

<p><b>These are the ad sizes we offer. Select your ad and optional design service below, and click Submit to pay by PayPal.</b></p>

<table width="650" border="0" cellpadding="5">

<tr><td width="33%" align="center"><img src="images/stories/sizes/1-8_wide.jpg" /><br />
    
    <b>1/8 Page Ad - 3.5" x 2"<br /> (€95)</b>

</td>
    
<td width="33%" align="center">

<img src="images/stories/sizes/1-4_tall.jpg" /><br />

    <b>1/4 Page Ad - 5"x 3.75 <br />(€185)</b>

</td>
    
<td width="33%" align="center"><img src="images/stories/sizes/1-3_wide.jpg" /><br />
    
    <b>1/3 Page Wide - 10.5" x 3.25"<br />(€254)</b>

</td></tr>

<tr><td width="33%" align="center"><img src="images/stories/sizes/1-3_tall.jpg" /><br />
    
    <b>1/3 Page Tall - 2.5" x 10.5"<br /> (€245)</b>

</td>
    
<td width="33%" align="center">

<img src="images/stories/sizes/1-2_wide.jpg" /><br />

    <b>1/2 Wide Ad - 8"x 5" <br />(€374)</b>

</td>
    
<td width="33%" align="center"><img src="images/stories/sizes/1-2_tall.jpg" /><br />
    
    <b>1/2 Page Tall - 3.75" x 10.5"<br />(€374)</b>

</td></tr>


<tr><td width="33%" align="center"><img src="images/stories/sizes/2-3_wide.jpg" /><br />
    
    <b>2/3 Page Wide - 8" x 6.75"<br /> (€558)</b>

</td>
    
<td width="33%" align="center">

<img src="images/stories/sizes/2-3_tall.jpg" /><br />

    <b>2/3 Tall Ad - 5" x 10.5" <br />(€558)</b>

</td>
    
<td width="33%" align="center"><img src="images/stories/sizes/full_page.jpg" /><br />
    
    <b>Full Page Ad - 8" x 10.5"<br />(€685)</b>

</td></tr>


   
       <tr>
      <td align="right">Select Your Ad Size</td>
      <td><label>

        <select name="selectedad" id="selectedad">
        <option selected="selected">Select an Ad Size</option>
        <option value="businesscard">Business Card - €95</option>
        <option value="quarterofpage">1/4 Page - €185</option>
        <option value="thirdofpagewide">1/3 Page Wide - €254</option>
        <option value="thirdofpagetall">1/3 Page Tall - €245</option>
        <option value="halfpagewide">1/2 Page Wide - €374</option>
        <option value="halfpagetall">1/2 Page Tall - €374</option>
        <option value="twothirdsofpagewide">2/3 Page Wide - €558</option>
        <option value="twothirdsofpagetall">2/3 Page Tall- €558</option>
        <option value="fullpage">Full Page - €685</option>
        </select>
      </label></td>
      <td> </td>
    </tr>
    <tr>
      <td>Would you like us to design your ad?:</td>
      <td><input type="checkbox" id="designservice" name="designservice" value="Yes" />
       Design Service (€30.00 )</td>
      <td> </td>
    </tr>
            <tr>
      <td>Total to pay</td>
      <td>€<input name="total" id="total" type="text" size="7" />
        </td>
      <td> </td>
    </tr>
       <tr align="center">
      <td colspan="3"><input type="submit" name="Submit" value="Send" />
* = Mandatory Field </td>
    </tr>
      </table>

and the following javascript in OnLoad:

window.addEvent('domready', function() {

  $('selectedad').addEvent('change', calc);
  $('designservice').addEvent('click', calc);

});
function calc() {

  var price = new Array();

  price['businesscard'] = 95;
  price['quarterofpage'] = 185;
  price['thirdofpagewide'] = 254;
  price['thirdofpagetall'] = 245;
  price['halfpagewide'] = 374;
  price['halfpagetall'] = 374;
  price['twothirdsofpagewide'] = 558;
  price['twothirdsofpagetall'] = 558;
  price['fullpage'] = 685;

  var rooms = $('selectedad').value;

  var total = 0;

  total = price[rooms];

if ( $('designservice').checked ) {
    total = total + 30;
  }

  $('total').value = parseInt(total);
}; 

Seems to be working perfectly. Now to add PayPal payment and email the details to admin.

Thanks again!

Hi artephius ,

Well done, good to hear that you got it working OK.

Bob