APIs & Integrations

LauraMauersberg
Participant

Form sends data to server but does not submit to next page (nor hubspot property)

Hi,
I really need help.
I am not a dev, but I have created a calculator tool with hubspot forms. On page 5 of my tool, when clicking "next", it does not go to the next page. Fields/properties are being correctly calculated and there is no error.
I have consulted with developers from my team but cannot find the issue.
Upon inspecting I see that all the correct data is being sent to the servers but I do not see the properties updated in hubspot.
Here is my issue: http://www.leanix.net/en/business_case_calculator_tool-5
For testing purposes, you can start here: http://www.leanix.net/en/business_case_calculator_tool .

Thank you very much for any help you can give me :slight_smile:
In the form, I have the fields hidden that I wish to calculate.

Code is:

//page 5
<script type="text/javascript">
var result = 0;

function calculateResult(){
    
    // calculate the result annual savings run cost
   result = parseFloat($('input[name="savings_unused_licenses"]').val()) / 100 * 
    parseFloat($('input[name="annual_run_cost"]').val()) + 
    parseFloat($('input[name="savings_on_non_license_run_cost_due_to_consolidating_applications"]').val()) / 100 *
    parseFloat($('input[name="annual_run_cost"]').val());
    
    // write the result into the hidden result field in the form ...
    $('input[name="annual_savings_on_run_cost"]').val(result);
}

function calculateResult1(){
    
    // calculate the result annual savings build cost
      result = parseFloat($('input[name="percentage_estimated_of_projects_to_be_non_compliant"]').val()) / 100 * 
        parseFloat($('input[name="total_budget_it_build_projects"]').val());
    
    // write the result into the hidden result field in the form ...
    $('input[name="annual_savings_on_build_cost"]').val(result);
}



function calculateResult2(){
    
    // calculate the result man days cleansing data
      result = parseFloat($('input[name="working_weeks_per_year"]').val()) * 
        parseFloat($('input[name="hours_per_week_spent_recording_and_cleansing_data"]').val()) * 
        parseFloat($('input[name="number_employees_recoding_and_cleansing_data"]').val());
    
    // write the result into the hidden result field in the form ...
    $('input[name="man_days_per_year_cleansing_data"]').val(result);
}


function calculateResult3(){
    
    // calculate the result man days cleansing data
      result = parseFloat($('input[name="c10"]').val()) + parseFloat($('input[name="c11"]').val());
    
    // write the result into the hidden result field in the form ...
    $('input[name="c9"]').val(result);
}

function calculateResult4(){
    
    // calculate the result man days cleansing data
      result = parseFloat($('input[name="b10"]').val()) + parseFloat($('input[name="b11"]').val());
    
    // write the result into the hidden result field in the form ...
      $('input[name="b9"]').val(Math.floor(result+''));
}
 function calculateResult5(){
// calculate the result man days cleansing data
      result = parseFloat($('input[name="man_days_per_year"]').val()) * parseFloat($('input[name="cost_per_man_day"]').val());
    
    // write the result into the hidden result field in the form ...
    $('input[name="c20"]').val(result);
}
function calculateResult6(){
    
    // calculate the result man days cleansing data
      result = parseFloat($('input[name="man_days_per_year_cleansing_data"]').val()) * parseFloat($('input[name="cost_per_man_day"]').val());
    
    // write the result into the hidden result field in the form ...
    $('input[name="c21"]').val(result);
}
function calculateResult7(){
    
    // calculate the result man days cleansing data
      result = parseFloat($('input[name="man_days_per_year_creating_reports"]').val()) * parseFloat($('input[name="cost_per_man_day"]').val());
    
    // write the result into the hidden result field in the form ...
    $('input[name="c22"]').val(result);
}
function calculateResult8(){
    
    // calculate the result man days cleansing data
      result = parseFloat($('input[name="man_days_per_year_working_on_ea"]').val()) * parseFloat($('input[name="cost_per_man_day"]').val());
    
    // write the result into the hidden result field in the form ...
    $('input[name="c23"]').val(result);
}

</script>

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({ 
    css: '',
    portalId: '2570476',
    formId: '4edbc517-a676-4a3f-af7d-470172c4daf3',
    onFormSubmit($form, ctx) {
    //debugger;
      calculateResult();
      calculateResult1();
      calculateResult2();
      calculateResult3();
      calculateResult4();
      calculateResult5();
      calculateResult6();
      calculateResult7();
      calculateResult8();
    }
  });
</script>
0 Upvotes
2 Replies 2
praveensas
Member

Form sends data to server but does not submit to next page (nor hubspot property)

Thanks for sharing this 

0 Upvotes
danaketh
Participant

Form sends data to server but does not submit to next page (nor hubspot property)

I've tried to submit the form with some custom data and the POST to https://forms.hubspot.com/submissions/v3/public/submit/formsnext/multipart/2570476/4edbc517-a676-4a3f-af7d-470172c4daf3 got me following response:

<script type="text/javascript">
    window.parent.postMessage({
        "formGuid": "4edbc517-a676-4a3f-af7d-470172c4daf3",
        "accepted": false,
        "conversionId": "216c5a6f-b097-4cec-a2bc-2475b621ac83",
        "redirectUrl": "http://www.leanix.net/en/business_case_calculator_tool-6",
        "inlineMessage": null,
        "debugResponse": null,
        "validationResults": [{
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "b9"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "man_days_per_year_cleansing_data"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "c20"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "c22"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "c21"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "c23"
        }, {"formSubmissionValidationType": "INVALID_NUMBER", "fieldName": "c9"}],
        "formSubmissionError": null
    }, "*")
</script>

So, just to make sure, I've tried with the defaults that you have there and got this:

<script type="text/javascript">
    window.parent.postMessage({
        "formGuid": "4edbc517-a676-4a3f-af7d-470172c4daf3",
        "accepted": false,
        "conversionId": "f2d6af3d-e9a6-4d77-a75b-24ee36935fca",
        "redirectUrl": "http://www.leanix.net/en/business_case_calculator_tool-6",
        "inlineMessage": null,
        "debugResponse": null,
        "validationResults": [{
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "b9"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "man_days_per_year_cleansing_data"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "c20"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "c22"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "c21"
        }, {
            "formSubmissionValidationType": "INVALID_NUMBER",
            "fieldName": "c23"
        }, {"formSubmissionValidationType": "INVALID_NUMBER", "fieldName": "c9"}],
        "formSubmissionError": null
    }, "*")
</script>

Based on that, my guess would be the redirection is not happening because you have errors in your form.

0 Upvotes