[Resolved] Toolset Forms Not Submitting field values set by javascript/jquery

[Author]

Posts

[aprilA]

I am trying to: I am trying to setup a calculations form with Toolset. I know Toolset forms doesn't allow auto calculations or conditionals to the extent I am wanting. To get around this I am still using Toolset forms to create my form, but adding in custom Javascript to do my calculations and setting certain disabled fields with these values.

Link to a page where the issue can be seen: hidden link
Password to view: toolset123

I expected to see: On the front end the text fields get set, but once the form is submitted the value that is saved is 0. Am I missing something that I need to set with javascript?

Here is my custom javascript and what I am doing
Form Code

[credform]
<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			[cred_field field='form_messages' class='alert alert-warning']
		</div>
	</div>
  <div class="row">
		<div class="form-group col-6 vert-center section-title">
			<label>PREFERRED REBATE</label>
		</div>
		<div class="form-group col-6 form-alignment">
			[cred_field field='preferred-rebate' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
            	[cred_show_group if="( $(preferred-rebate) eq 'Check' )" mode="fade-slide"]
  <div class="row">
	<div class="form-group col-6 offset-6 form-alignment">
		<label class="small-label">Please upload your W-9: </label>
		[cred_field field='w-9' force_type='field' class='form-control line-alignment' output='bootstrap']
      <label class="small-label">W-9 must be submitted by September 30th, 2019 </label>
	</div>
  </div>[/cred_show_group]
	<div class="row">
      
		<div class="form-group col-6 form-alignment">
			<label class="left">Name: </label>
			[cred_field field='name' force_type='field' class='form-control' output='bootstrap']
		</div>
      		<div class="form-group col-6 form-alignment">
			<label class="left">Title: </label>
			[cred_field field='title' force_type='field' class='form-control line-alignment' output='bootstrap']
		</div>
      
	</div>

	<div class="row">
		<div class="form-group col-5 form-alignment">
			<label class="left business-name">Business Name: </label>
			[cred_field field='business-name' force_type='field' class='form-control' output='bootstrap']
		</div>
		<div class="form-group col-7 form-alignment">
			<label class="left business-address">Business Address: </label>
			[cred_field field='business-address' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-4 form-alignment">
			<label class="left">City: </label>
			[cred_field field='business-city' force_type='field' class='form-control' output='bootstrap']
		</div>
		<div class="form-group col-4 form-alignment">
			<label class="left">State: </label>
			[cred_field field='business-state' force_type='field' class='form-control' output='bootstrap']
		</div>
		<div class="form-group col-4 form-alignment">
			<label class="left">Zip: </label>
			[cred_field field='business-zip' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
  	<div class="row">
            		<div class="form-group col-6 form-alignment">
			<label class="left">Phone: </label>
			[cred_field field='phone' force_type='field' class='form-control' output='bootstrap']
		</div>
		<div class="form-group col-6 form-alignment">
			<label class="left">Email: </label>
			[cred_field field='email' force_type='field' class='form-control' output='bootstrap']
		</div>

	</div>
    <div class="row">
		<div class="form-group col-12 vert-center section-title section-title-dis">
			<label>Distributor Info</label>
		</div>
  </div>
	<div class="row">
		<div class="form-group col-6 form-alignment">
			<label class="left dis-name">Distributor Name: </label>
			[cred_field field='distributor-name' force_type='field' class='form-control' output='bootstrap']
		</div>
		<div class="form-group col-6 form-alignment">
			<label class="left rep-name">Rep Name: </label>
			[cred_field field='distributor-rep' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-6 form-alignment">
			<label class="left rep-email">Rep Email: </label>
			[cred_field field='distributor-rep-email' force_type='field' class='form-control' output='bootstrap']
		</div>
		<div class="form-group col-6 form-alignment">
			<label class="left rep-phone">Rep Phone: </label>
			[cred_field field='distributor-rep-phone' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row table-top">
		<div class="col-3">
			<h5>Unit Size</h5>
		</div>
		<div class="col-3">
			<h5>Unit Quantity</h5>
		</div>
		<div class="col-3">
			<h5>Rebate Per Unit</h5>
		</div>
		<div class="col-3">
			<h5>Rebate Subtotal</h5>
		</div>
	</div>
	<div class="row">
		<div class="col-3">
			<p>1 gal.</p>
		</div>
		<div class="form-group col-3">
			
			[cred_field field='1-gal-unit-quantity' force_type='field' class='form-control' output='bootstrap']
          <label class="min-unit-label">4 units minimum</label>
		</div>
		<div class="col-3">
			<p>$44.90</p>
		</div>
		<div class="form-group col-3">
			[cred_field field='1-gal-rebate-subtotal' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="col-3">
			<p>21.8 fl. oz.</p>
		</div>
		<div class="form-group col-3">
			[cred_field field='21-oz-unit-quantity' force_type='field' class='form-control' output='bootstrap']
          <label class="min-unit-label">6 units minimum</label>
		</div>
		<div class="col-3">
			<p>$7.45</p>
		</div>
		<div class="form-group col-3">
			[cred_field field='21-oz-rebate-subtotal' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-6 offset-6 form-alignment">
			<label class="left grand-total">Grand Total Rebate Amount: </label>
			[cred_field field='grand-total-rebate-amount' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
		</div>
	</div>
</div>
[/credform]

Javascript Code

jQuery(document).ready(function() {

jQuery('input[name=wpcf-1-gal-rebate-subtotal]').attr("disabled", true);
jQuery('input[name=wpcf-21-oz-rebate-subtotal]').attr("disabled", true);
  jQuery('input[name=wpcf-grand-total-rebate-amount]').attr("disabled", true);
jQuery('input[name=wpcf-1-gal-rebate-subtotal]').formatCurrency();
jQuery('input[name=wpcf-21-oz-rebate-subtotal]').formatCurrency();
jQuery('input[name=wpcf-grand-total-rebate-amount]').formatCurrency();
  
var runcalculation = function() {
  var gal_unit_req = 4;
  var oz_unit_req = 6;

  // Doo something
    if(jQuery('input[name=wpcf-1-gal-unit-quantity]').val() >= gal_unit_req	){ 
    //alert('Meets Requirement!');
      var galqty = jQuery('input[name=wpcf-1-gal-unit-quantity]').val();
      //alert(galqty);
 	  var galrebateprice = "44.90";
      var galrebatetotal = galqty*galrebateprice;
      var galrebatetotalparsed = parseFloat(galrebatetotal);
      var onegalsubtotal = galrebatetotalparsed;
      //alert(galrebatetotalparsed);
      jQuery('input[name=wpcf-1-gal-rebate-subtotal]').val(galrebatetotal);
      jQuery('input[name=wpcf-1-gal-rebate-subtotal]').formatCurrency();
      
    }else{
    //alert('Does Not Meet Requirement!');
      jQuery('input[name=wpcf-1-gal-rebate-subtotal]').val("0");
      var onegalsubtotal = parseInt(jQuery('input[name=wpcf-1-gal-rebate-subtotal]').val());
      //alert(onegalsubtotal);
      jQuery('input[name=wpcf-1-gal-rebate-subtotal]').formatCurrency();
    }
  if(jQuery('input[name=wpcf-21-oz-unit-quantity]').val() >= oz_unit_req){ 
    //alert('Meets Requirement!');
      var ozqty = jQuery('input[name=wpcf-21-oz-unit-quantity]').val();
 	  var ozrebateprice = "7.45";
      var ozrebatetotal = ozqty*ozrebateprice;
      var ozrebatetotalparsed = parseFloat(ozrebatetotal);
      var ozsubtotal = ozrebatetotalparsed;
      //alert(ozrebatetotalparsed);
      jQuery('input[name=wpcf-21-oz-rebate-subtotal]').val(ozrebatetotal);
      jQuery('input[name=wpcf-21-oz-rebate-subtotal]').formatCurrency();
      
    }else{
    //alert('Does Not Meet Requirement!');
      jQuery('input[name=wpcf-21-oz-rebate-subtotal]').val("0");
      var ozsubtotal = parseInt(jQuery('input[name=wpcf-21-oz-rebate-subtotal]').val());
      //alert(ozsubtotal);
      jQuery('input[name=wpcf-21-oz-rebate-subtotal]').formatCurrency();
    }
  
        var total = onegalsubtotal+ozsubtotal;
  //alert(total);
        jQuery('input[name=wpcf-grand-total-rebate-amount]').val(total);
  jQuery('input[name=wpcf-grand-total-rebate-amount]').formatCurrency();
}  
  
  
jQuery('input[name=wpcf-1-gal-unit-quantity]').change(runcalculation);
jQuery('input[name=wpcf-21-oz-unit-quantity]').change(runcalculation);
});

[Christian Cox]

There's no JavaScript API for Forms, so I don't have much to offer here. What happens if you run the same tests without the disabled attribute applied to the calculated fields? What if you manually trigger a 'change' event on the calculated fields after calling formatCurrency?

[aprilA]

So this is interesting. If I removed the disabled attribute, the values are submitted correctly.

Do you have a different recommendation to still display the calculations, but submit the values still? The reason why I disabled those fields, is that I didn't want the user trying to just put whatever amount in the totals field.

[Christian Cox]

Maybe temporarily remove the disabled attribute when you set the value, trigger a 'change' event, then replace the disabled attribute immediately after? I'm not sure how the disabled attribute factors into the process that gathers the field values before submission, or if the 'change' event is necessary.

[aprilA]

My issue is resolved now. Thank you!