Form field values scored as a running tally and then totaled on submit

[mikestlouis]

I have ten form fields that are simple Y/N answers (radio buttons) I am looking to have each question be scored as Y=1 N=0 and then pushed to a hidden field that holds the overall value, so if the user answers yes to 6 of the questions the score is tallied in the hidden and would = 6.

The reason for this is because I am trying to get the total score at form submit so I can pass it to trigger dynamic content on the follow-up landing page. Any help would be greatly appreciated.

[SanfordWhiteman · Accepted solution]

Like this:

MktoForms2 :: Total checked checkboxes/radios

Maybe something to expand/explain on the Blog soon.

[mikestlouis]

As always - appreciate the effort and expertise. I should have mentioned that am I also using this script of yours to have multiple forms called in to create a multi-step style experience (below). I added the new script and the hidden score field is not being populated (not part of the script below). For reference - the first form has different styling and profile questions (first/last name, etc.) and the last 5 forms ask essentially 2 radio button questions each - which are the questions being scored.

<script>
   // config section - customize for your org
      var config = {
        instanceHost: "//ab.marketo.com",
        munchkinId: "123-ABC-456",
        formidStack: [1, 2, 3, 4, 4, 6],
        onFinalSuccess: function(vals, thankYouURL) {
          /* whatever you want to do after the final form is submitted */
        },
        insertInsideSelector: "#formContainer",
        insertBeforeSelector : null,
        forwardFields : ["Email"] // array of fields to add to next form (e.g. to aid in Hidden field AutoFill)
      }
      
      /* --- NO NEED TO TOUCH ANYTHING BELOW THIS LINE */

      // utility fns
      var injectMktoForm = function(parentEl, insertBeforeEl, instanceHost, munchkinId, formid, onReady) {
        var formEl = document.createElement('FORM');
        formEl.id = 'mktoForm_' + formid;
        try {
          parentEl.insertBefore(formEl, insertBeforeEl)
        } catch (e) {
          parentEl.appendChild(formEl)
        }
        MktoForms2.loadForm.apply(MktoForms2, Array.prototype.slice.apply(arguments, [2]));
      }

      var ejectElement = function(formEl) {
        formEl.parentNode.removeChild(formEl);
      }

      var arrayPushGet = function(ary, pushable) {
        return ary[ary.push(pushable) - 1];
      }
      
      // main work
      var formParentEl = document.querySelector(config.insertInsideSelector) || document.body,
        formEl = formParentEl.querySelector(config.insertBeforeSelector),
        formidInitialCount = config.formidStack.length,
        formElStack = [],
        formid;
      
      // allow runtime override of starting form ID - note the length is calc'd above
      var startFormId = +document.location.hash.substring(1),
        startFormIndex = Math.max(config.formidStack.indexOf(startFormId),0);

      config.formidStack = config.formidStack.slice(startFormIndex);
      

      var nextForm = function(values, thankYouURL) {
        if (formid = config.formidStack.shift()) {
          injectMktoForm(formParentEl, formEl, config.instanceHost, config.munchkinId, formid,

            function(form) {

              if (formEl) {
                ejectElement(formElStack.shift()); // nothing to eject on initial run
                debugger;
                var mktoFields = config.forwardFields
                  .reduce(function(acc,fieldName){
                    acc[fieldName] = values[fieldName];
                    return acc;
                  },{});
                form.addHiddenFields(mktoFields);
              }

              formEl = arrayPushGet(formElStack, form.getFormElem()[0]);
              formParentEl = formEl.parentNode;

           

              form.onSuccess(config.formidStack.length ? nextForm : config.onFinalSuccess);

            });

          // don't forward to ThankYouURL
          return false;
        }
      }

      nextForm(); // first call will initialize

</script>

[SanfordWhiteman]

OK, that’s a very different situation. You’re talking about totaling values across forms.

Them being on the same page of course helps (compared to different pages) because you can update a variable in a shared scope. But you would need to refactor the existing multi-form code considerably. I’d recommend pulling away from that and moving to a single form with a set of show/hide blocks.

[mikestlouis]

Thanks Sandy - I was able to get this working as needed with the exception on the tallying of the fields. So I have 5 fieldsets in a form that will show two questions per fieldset (10 total radio button questions [Yes, No]). When I tested it - it is not looking for just the "Yes" responses, but rather is tallying all answers - so everyone will always have a score of 10. Would there be a way to modify this script so it only scores +1 for just the yeses? So if at the end the user answered yes for 6 questions the total would be 6?

[SanfordWhiteman]

---

When I tested it - it is not looking for just the "Yes" responses, but rather is tallying all answers - so everyone will always have a score of 10.

That’s not correct. It’s looking for all values except for string "no" and constant undefined. Remember, JS is case-sensitive.

[mikestlouis]

**bleep** you and your easter-egg trickery! Brilliant - works like a charm... still hate JS though 😉