Re: Displaying form results on a landing page

MarkRoma78
Level 1

Hi all, new to the boards so apologies if I'm posting improperly here.

 

I have searched high and low and cannot find a discussion that matches my needs:

I have a form with custom radio button fields with numeric values, and i need the TOTAL of those values to display in the landing page so the user can see and confirm before they submit. i feel like there has been a lot of talk of field calculations, but not how to display them before submit. is this even possible in marketo?

11 REPLIES 11
Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

So, if I understand this correctly, you need to show the total as people select the checkboxes (assuming each has a numeric value associated with it) and update it as people change their selections too, right? You can do this via the forms library- get the checkbox values that the user has selected (I.e., are set on true) and add them using JS. 

MarkRoma78
Level 1

Firstly. thank you so much for your reply!

 

however, as easy as you make that sound, I cannot find a single example where anyone has done it, or referenced it in a forum, and i cannot seem to get my JS to pull those numeric values at all. can you point me in a more specific direction where i can get some guidance on this?

Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

 

MktoForms2.whenReady(function(form) {
  var checkboxValues = [];
  var totalValue = 0;
  var sumElement = document.getElementById("sumElement"); // Replace "sumElement" with the ID or selector of the element where you want to display the sum

  form.getFormElem().find('[type="checkbox"]').on('change', function() {
    checkboxValues = form.getFormElem().find('[type="checkbox"]:checked').filter(function() {
      // Filter out checkboxes based on their name or ID
      return this.name !== "excludeCheckbox1"
    }).map(function() {
      return parseInt(this.value);
    }).get();

    totalValue = checkboxValues.reduce(function(sum, value) {
      return sum + value;
    }, 0);

    sumElement.textContent = totalValue; // Update the content of the sum element with the calculated total value
  });
});

 

In this code, you need to customize the exclusion logic based on the name or ID of the checkboxes you want to exclude from the sum calculation. Replace "excludeCheckbox1" with the actual ID of the checkbox you want to exclude (e.g., you might have an Email Opt-In checkbox that you may not want to include for computing the sum). You can add additional checkboxes too if you want to exclude them from computing the sum when checked. The filter() method is used to exclude the checkbox based on their ID. Only the checkboxes that don't match the exclusion criteria will be included in the checkboxValues array and used for calculating the sum. Also, replace "sumElement" with the ID or selector of the HTML element where you want to display the sum. Make sure the element exists in your HTML markup. The logic would remain same for the radio fields too, you'd read their parse their numeric values, sum them up, and display it. I deployed it on a test page here.

 

SanfordWhiteman
Level 10 - Community Moderator
  • you don’t actually have to know what kind of input (text, checkbox, radio) it is — just whether the value should be parsed as a Number
  • you don’t need to check the DOM value because the Marketo JS API will always know the values
  • you don’t need to listen for each field to change, just listen for the whole form

 

See MktoForms2 :: Total numeric fields 

MarkRoma78
Level 1

okay, this may seem like a stupid question, but where did you get that "output" field in your form?

SanfordWhiteman
Level 10 - Community Moderator

It's in a Rich Text area.

MarkRoma78
Level 1

you are my hero, an absolute legend. i'll dig into this tomorrow and let you know how it turns out

SanfordWhiteman
Level 10 - Community Moderator

You said they were radio buttons. Are they actually checkboxes? That’s very different.

 

Please link to a page with your form.

MarkRoma78
Level 1

here's a temporary version of the page:

 

https://go.info.shi.com/testing-form-code.html

Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

I agree- it'd be nice to have a link to the page with the form.

 

MarkRoma78
Level 1

yep, they are actually radio buttons:

 

https://go.info.shi.com/testing-form-code.html

 

it's a generic template because the project would require me to keep this somewhat temporary until the campaign is ready to go public.