MktoForms2 :: Conditionally Show Submit

conditionally-show-submit.html

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_245"></form>

conditionally-show-submit.js

  MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 245);
  MktoForms2.whenReady(function(form) {

    //  tag all outer wrapper DIVs with their inner inputs' names to make them more findable
    for (var formEl = form.getFormElem()[0], formRows = formEl.querySelectorAll('.mktoFormRow'), i = 0, imax = formRows.length, wrappedField; i < imax; i++) {
      if ((wrappedField = formRows[i].querySelector('INPUT,SELECT,TEXTAREA')) && wrappedField.name) {
        formRows[i].setAttribute('data-wrapper-for', wrappedField.name);
      }
    }

    var selectEl = formEl.querySelector('SELECT'), // the interesting SELECT
      conditionalEl = formEl.querySelector('.mktoFormRow[data-wrapper-for="__showSubmit"]'), // the DIV w/visibility rule we're using to conceal the submit
      submitEl = formEl.querySelector('.mktoButtonRow'); //  the DIV wrapper for the submit button

    // indicate this is the initial state
    conditionalEl.setAttribute('data-default-state', 'true');

    // move the submit button inside the VR-dependent row
    conditionalEl.appendChild(submitEl)

    // whenever the select changes, check whether it's still on the empty value 'Select...'
    selectEl.addEventListener('change', function(e) {
      conditionalEl.setAttribute('data-default-state', !!!selectEl[selectEl.selectedIndex].value);
    })

  });