Forums

Adding 2 dropdown selection fields to total amount field

desertdiana 30 Nov, 2013
Hi,

I have been reading and trying to figure out how to add 2 dropdown fields together into a Total Amount field. But if a person doesn't select one of the fields then the option value=select can not be passed to be able to process the payment through our payment gateway.

Can you give me the how to achieve this? Here is my form code and the fields to be added are adult and senior_student and then put in the chargetotal field before the user submits the form.

Thank you for your help, really appreciate your expertise.

Diana

<div class="ccms_form_element cfdiv_select" id="adult1_container_div" style=""><label>Adult Total:</label><select size="1" class="" title="" name="adult">
<option value="select">Please Select</option>
<option value="40.00">1 Adult - $40.00</option>
<option value="80.00">2 Adults - $80.00</option>
<option value="120.00">3 Adults - $120.00</option>
<option value="160.00">4 Adults - $160.00</option>
<option value="200.00">5 Adults - $200.00</option>
<option value="240.00">6 Adults - $240.00</option>
</select>
<div class="clear"></div><div id="error-message-adult"></div></div><div class="ccms_form_element cfdiv_select" id="senior_student1_container_div" style=""><label>Senior and Students</label><select size="1" class="" title="" name="senior_student">
<option value="select">Please Select</option>
<option value="30.00">1 Senior or Student - $30.00</option>
<option value="60.00">2 Seniors or Students - $60.00</option>
<option value="90.00">3 Seniors or Students - $90.00</option>
<option value="120.00">4 Seniors or Students - $120.00</option>
<option value="150.00">5 Seniors or Students - $150.00</option>
<option value="180.00">6 Seniors or Students - $180.00</option>
<option value="210.00">7 Seniors or Students - $210.00</option>
<option value="240.00">8 Seniors or Students - $240.00</option>
<option value="270.00">9 Seniors or Students - $270.00</option>
<option value="300.00">10 Seniors or Students - $300.00</option>
<option value="330.00">11 Seniors or Students - $330.00</option>
<option value="360.00">12 Seniors or Students - $360.00</option>
</select>
<div class="clear"></div><div id="error-message-senior_student"></div></div><div class="ccms_form_element cfdiv_text" id="chargetotal1_container_div" style=""><label>Charge Total:</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="chargetotal" />
<div class="clear"></div><div id="error-message-chargetotal"></div></div>
GreyHead 30 Nov, 2013
Hi Diana,

If they need to be completed then they should have the validation set as required.

With amounts you should always repeat the validation (and the calculation) serverside after the form is submitted.

You can do the calculation in the browser using JavaScript in a Load JS action. Before you do that add ids to the two select dropdown elements and the results input; I've assumed that these will be the same as the names.
window.addEvent('domready', function() {
  // make the result input readonly
  $('chargetotal').readonly = true;
  $('adult').addEvent('change', checkTotal);
  $('senior_student ').addEvent('change', checkTotal);

  function checkTotal() {
    if ( $('adult').value > 0 && $('senior_student').value > 0 ) {
      $('chargetotal').html = parseInt($('adult').value) + parseInt($('senior_student').value);
    } else {
      $('chargetotal').html = 'Please select both values';
    }
  }
});
!! Not tested and may need debugging !!

Bob
desertdiana 05 Dec, 2013
Thanks Bob, I will give it a try!
This topic is locked and no more replies can be posted.