Forums

Hi All

I am having an issue . . .

I am creating a booking form and need to use a script, so that when a visitor selects the group size
the script will set the value of a hidden feild with the total cost of the package.

all the data is saved in a database and i am pulling the dada using the profile page plugin. which works fine in the form HTML using the {feild_name}

But I have tried this in the form java script and it wont work, I have also tried to enter it using php echo (see below) but no joy either. . and one got any ideas on how to make it work?

function computeTotal(form) {

if (form.DescItem3.value == '01')
{
var Item3Desc = new Array("01", <?php echo $gs1_total; ?>' />, "1night", "Sales");
}
if (form.DescItem3.value == '02')
{
var Item3Desc = new Array("02", <?php echo $gs2_total; ?>' />, "2night", "Sales");
}
if (form.DescItem3.value == '03')
{
var Item3Desc = new Array("03", {gs3_total}, "3night", "Sales");
}
if (form.DescItem3.value == '04')
{
var Item3Desc = new Array("04", {gs4_total}, "4night", "Sales");
}

Hi darrenhallinan,

I'm not quite sure what the end result you are trying to achieve is?

If you just want to include the cost in the form results then you can calculate and add the value using PHP in the OnSubmit Before box after the form is submitted. This looks the easiest answer to me.

The JavaScript as it is shown here doesn't actually do anything (and there is no code to call it though that may be in the Form HTML).

Bob

PS If you want to include PHP in your JavaScript then it has to be in the Form HTML box so that it will be evaluated (or at least the JavaScript 'var's have to be there. Pure JavaScript is best placed in the Form JavaScript box.

Hi Greyhead

Please see attached form

I am using this on another website at the moment, but I would like to use it for the current project I am working on, but am open to ideas!

here is what I have . . .

client fills in form and in the form fills in the total price for the package for group sizes from 1 to 8 people

Data is saved and a page is compiled and published and the client chooses where to publish it to
i.e golf packages, family packages etc. within the content of the created page is a link to a form with the uid value of the package.

all relevant details about the package are then filled into the form

all the visitor has to do is:

1. enter the arrival date
2. enter the group size

the visitor clicks next and the package details, along with group size and total price will be sent to the next stage of the process.

as the price for each group size is in the database, I need a way to get the "total" depending on the value entered.

if you see the attached form you will see when a visitor selects a Package Type the price in the total field is updated. . but the prices are in the script in the head of the document, so by the sounds of your reply my plan of using this script will not be possible.

Hi darrenhallinan,

If I understand correctly the 'client' here is the website owner and the 'visitor' is the end user.

I think that you can do pretty much what you have here; give each package a uid, save the package data in the database and then call the form using the uid to get the correct data. You can save this into hidden inputs in the form and have the script read these values to feed into the calculations.

I think that this will work OK provided that there is some way of passing the uid back to the form. At present the ChronoForms Mambot/plug-in does' support parameters but there must be some way round that.

Bob

I have found a good way (more importantly and easy way of changing the field values, and that's using buttons!

below is a copy of my html

<?php
$document = &JFactory::getDocument();
$document->addScript( 'js/datepicker.js' );
?>
<?php
$doc =& JFactory::getDocument();
$doc->addStyleSheet( 'css/datepicker.css');
?>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="43%" valign="top">1. Choose number of people in your group</td>
    <td width="57%" valign="top">2. Choose Arrival Date</td>
  </tr>
  <tr>
    <td valign="top">
      <table width="100%" valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
          <td colspan="4">
      selected:<input readonly="readonly" id="groupsize" class="required" name="groupsize" style="background:#F8F9FA; text-align:center; border:none" type="text" value="" size="1" title="Please Choose A Group Size By Clicking On The Relevant Icon Below" maxlength="1"></td>
          </tr>       
 <tr>
          <td><INPUT TYPE="button" class="cf_inputbox required" VALUE="1 Persons" onClick="this.form.groupsize.value= '1';this.form.total_price.value= '{gs1_total}';">  </td>
          <td><INPUT TYPE="button" VALUE="2 Persons" onClick="this.form.groupsize.value= '2';this.form.total_price.value= '{gs2_total}';">
             </td>
          <td><INPUT TYPE="button" VALUE="3 Persons" onClick="this.form.groupsize.value= '3';this.form.total_price.value= '{gs3_total}';">
             </td>
          <td><INPUT TYPE="button" VALUE="4 Persons" onClick="this.form.groupsize.value= '4';this.form.total_price.value= '{gs4_total}';">
             </td>
        </tr>
        <tr>
          <td><INPUT TYPE="button" VALUE="5 Persons" onClick="this.form.groupsize.value= '5';this.form.total_price.value= '{gs5_total}';">
             </td>
          <td><INPUT TYPE="button" VALUE="6 Persons" onClick="this.form.groupsize.value= '6';this.form.total_price.value= '{gs6_total}';">
             </td>
          <td><INPUT TYPE="button" VALUE="7 Persons" onClick="this.form.groupsize.value= '7';this.form.total_price.value= '{gs7_total}';">
             </td>
          <td><INPUT TYPE="button" VALUE="8 Persons" onClick="this.form.groupsize.value= '8';this.form.total_price.value= '{gs8_total}';">
             </td>
        </tr>
      </table>
    </td>
    <td><div style="padding-left: 30px;">
 (selected: <input type="text" readonly="readonly" class="w16em required" title="Please Choose An Arrival Date Below" name="arrival_date" id="{package_type}" value="" rel="{package_type}" style="background:#F8F9FA; text-align:center; border:none" size="10" maxlength="10" />)</div></td>
  </tr>
</table>

<input name="total_price" type="hidden" value=""></dt>
  <script type="text/javascript">
// default - Use the date format "d-sl-m-sl-Y" i.e. 03/12/2009
datePickerController.createDatePicker({
  formElements:{"default":"d-sl-m-sl-Y"}
});   
</script>
<script type="text/javascript">
// midweek Use for mid week offers
var opts = {                            
  formElements:{"midweek":"d-ds-m-ds-Y"},
  staticPos:true,
  disabledDays:[0,0,0,0,1,1,0],
  rangeLow:"{s_year}{s_month}{s_day}",
  rangeHigh:"{f_year}{f_month}{f_day}",
};      
datePickerController.createDatePicker(opts);
 </script> 
<script type="text/javascript">
// weekend Use for weekend offers
var opts = {                            
  formElements:{"weekend":"d-ds-m-ds-Y"},
  staticPos:true,
  disabledDays:[1,1,1,1,0,0,1],
  rangeLow:"{s_year}{s_month}{s_day}",
  rangeHigh:"{f_year}{f_month}{f_day}",
};      
datePickerController.createDatePicker(opts);
 </script>
<script type="text/javascript">
// Saturday To Saturday - Use For High Season Packages
var opts = {                            
  formElements:{"sat2sat":"d-ds-m-ds-Y"},
  staticPos:true,
  disabledDays:[1,1,1,1,1,0,1],
  rangeLow:"{s_year}{s_month}{s_day}",
  rangeHigh:"{f_year}{f_month}{f_day}",       
};      
datePickerController.createDatePicker(opts);
	  </script> 
<br>
<input value="{uid}" id="hidden_5" name="uid" type="hidden" />

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Continue" name="button_2" type="submit" />
    <input type="reset" value="Reset">
  </div>
  <div class="cfclear"> </div>
</div>

I will make it look a little nicer by adding icons instead of using buttons and although I have the fields set as read only and hidden I might validate it on the server side, to be sure to be sure!

anyway I am delighted!

Also for those interested i came across a fantastic date picker
http://www.frequency-decoder.com/2009/09/09/unobtrusive-date-picker-widget-v5/

which allows you to enable and disable dates, days, etc.
Set high and low date ranges.
and highlight days of the week, set start day of week.

well worth a look


@greyhead - Seen your book - looks very good I will defo be treating myself to a read when I get paid from this job - that's my dangling carrot to get this finished

Hi darrenhallinan ,

Neat solution!!

Bob

PS The Aeron datepicker that ChronoForms uses can, I think, do all of these:

which allows you to enable and disable dates, days, etc.
Set high and low date ranges.
and highlight days of the week, set start day of week.

The a