Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Javascript in Form

ad
adamlincoln 08 Sep, 2007
Hello everyone!

I am a bit new to Chronoform but have been doing a lot of reading in the forums and FAQs...

What I am attempting to do is create a webform in Joomla for profit organization who hold bi-annual conferences. Basically I am trying to create a form that takes the members information, totals the cost for various fields (ie membership renewal, Conference fees and so on) and then links in with our payment gateway to process credit cards.

The form I created uses a javascript to total the costs on the forms, and I cannot get this to work corretly. I find that if I put the leave out the form information, just putting in the header and body in the FORM HTML part and publishing all of the form plus the javascript, that it works, but then it doesn't create the tables necessary to store the data because the form isn't actually in the FORM HTML part. The javascript employed is called Calculated Fields which is a Dreamweaver addin from hotdreamwever.com.

If I just put the form in the FORM HTML, then the form and table works correctly, but the various fees are not tabulated at all.

Any help would be appreciated... I don't know if I should publish any of the code or not, but would be happy to if that is helpful.

Thanks in advance for any suggestions or help. 😉
Gr
GreyHead 08 Sep, 2007
Hi adamlincoln,

I'm not completely sure what you are doing (and even less sure what's happening) but let's tale this step by step.

In the Form HTML field you should put the form code (without the <form> tags (nor any <header> or <body> tags). If you are taking the code from DreamWeaver than you should just be able to copy and paste from the end of the <form> tag to the beginning of the </fom> tag. I guess that this will include some hidden fields to save the results of the JavaScript calculations.

Take your JavaScript and paste that into the Form Script field.

You may need some code in the OnSubmit field to go inside the form tag and trigger your JavaScript (the depends how the JS works).

Once you have the data being shown up in a test results e-mail then you can use Create Table in the Forms Manager to set up a data table to save the form data.

Feel free to post your code here - but remove or hide any sensitive content like passwords, logins and maybe emails.

Bob
ad
adamlincoln 08 Sep, 2007
Thanks for the prompt reply...

Sorry that I was unable to make clear what I attempting to do...😉

I attempted what you stated about, but to no avail.

I guess what I really need to know is if there is a simplier way of calculating something on a form (in this case cost) in realtime, so that a total will be updated as members click on an item or registration? Is there a way of doing this withought javascript?
Gr
GreyHead 08 Sep, 2007
Hi adamlincoln,

There are two main ways of doing calculations like this (a) in the browser using JavaScript and getting a real-time response or (b) passing the data back to the server (on form submit) doing the calculation there, probably in php, and re-showing a modified page to the browser. Both routes have pluses and minuses but the JavaScript route looks like the better one for what you are trying to do.

I see that the hotdreamweaver script is commercial so I guess that you can't paste it here. If you want, I can have a look at the ChronoForms admin on your site - just send me an admin user id and password to info at greyhead.net

Bob
bo
boysen 24 Nov, 2007
This is exactly what I am trying to do as well. I found a very simple solution that works in a regular browser window - but not in a chrono form. One thing that I am aware of is that the CALCULATE functionality seems to rely on the form name. (which is removed for the Form HMTL on Chrono.

Any suggestions?

view the whole form [here

Here is the relevant section: 
<p class="headertitle">CONFERENCE PRICING: </p>
 <table width="500px" border="0" cellspacing="0" cellpadding="4">
   <tr>
     <th width="414" valign="top" class="td_underline" scope="row"><div align="left" class="bodyform">Registration Fee for Conference <br />
      (includes lunch and dinner) - $150</div></th>
     <td width="496" valign="top" class="td_underline"><span class="style3">Amount:
         <input name="reg" type="text" size="5" />
     </span></td>
   </tr>
   <tr>
     <th valign="top" class="td_underline" scope="row"><div align="left" class="bodyform">Special Registration fee for Young Women (ages 11-21) - $85</div></th>
     <td class="td_underline">
       <span class="style3">
       <label>Amount:
       <input name="regyoung" type="text" size="5" />
       </label>
      </span>     </td>
   </tr>
   <tr>
     <th valign="top" class="td_underline" scope="row"><div align="left" class="bodyform">Pre- Conference, Maps of the Clitoris; the Truth about Female Anatomy - $50- $35 - (sliding scale)</div></th>
     <td class="td_underline">
       <span class="style3">
       <label>Amount:
       <input name="mapsprice" type="text" size="5" />
       </label>
      </span>     </td>
   </tr>
   <tr>
     <th valign="top" class="td_underline" scope="row"><div align="left" class="bodyform">Women Rise Up CD <br />
      with ALisa’s Belly and Womb Chants - $12</div></th>
     <td class="td_underline">
       <span class="style3">
       <label>Amount:
       <input name="chants" type="text" size="5" />
       </label>
      </span>     </td>
   </tr>
   <tr>
     <th valign="top" class="td_underline" scope="row"><div align="left" class="bodyform">Some women need financial help to attend. If you are able please consider contributing scholarship monies to them. Every amount helps and 100% of donations will go towards their need. 
Volunteer Contribution for Scholarships</div></th>
     <td valign="top" class="td_underline">
       <span class="style3">
       <label>Amount:
       <input name="scholarship" type="text" size="5" />
       </label>
      </span>     </td>
   </tr>
 </table>
 <p class="bodyform500">
   <label></label>
    <span class="regularstyle">TOTAL REGISTRATION AMOUNT:</span> 
   <label></label>
   <input name="total" type="text" id="total" size="15" /> 
   <input type="button" value="Calculate"
onclick="registration.total.value = (1* registration.reg.value) + (1* registration.regyoung.value) + (1* registration.mapsprice.value) + (1* registration.chants.value) + (1* registration.scholarship.value)" />
 </p>


Post edited by: GreyHead, at: 2007/11/26 17:02<br><br>Post edited by: GreyHead, at: 2007/11/27 07:23
Gr
GreyHead 26 Nov, 2007
Hi boysen,

ChronoForms generates a form name like "ChronoContact_myform" where 'myform' is the form name you entered in the ChronoForms General Tab. In this case it's probably simplest to edit the JavaScript to match this
 <input type="button" value="Calculate"
onclick="ChronoContact_registration.total.value = (1* ChronoContact_registration.reg.value) + (1* ChronoContact_registration.regyoung.value) + (1* ChronoContact_registration.mapsprice.value) + (1* ChronoContact_registration.chants.value) + (1* ChronoContact_registration.scholarship.value)" />
I'm sure that there are more elegant solutions but this should work.

Bob
bo
boysen 27 Nov, 2007
Perfect. Thank you.
That did the trick.
Ke
Kevin on Vashon 25 Apr, 2008
Is it possible to get this technique to work with checkbox values, i.e. it will only include the checkbox value when the checkbox is checked? This script works fine except that it seems to calculate all the checkboxes values whether they are checked or not.
Thanks
Kevin
Gr
GreyHead 25 Apr, 2008
Hi Kevin,

I'm sure it's possible but I'm no JavaScript expert. I'd guess that you have to add in some 'if ... then add' but I'd have to work out the actual code from scratch. Try Googling for a script and you'll probably find several. Then you'll need to modify the form name as we did here.

Bob
Ke
This topic is locked and no more replies can be posted.