JavaScript calc function - no longer works after switching to Bootstrap4

Question

I am shifting a website over to Bootstrap4. One of the pages contained a simple calculator to generate percentages based on user input. This worked fine on the old site using basic HTML with no additional framework but no longer responds to the user input.

I tried double checking against a similar real-time calculator (http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml), but I can't seem to get that one to work either.

function getSupport() {
  var theForm = document.forms["calculator"];
  var supportV = theForm.elements["support"];
  var indvSupport = 0;
  if (support.value != "") {
    indvSupport = parseInt(supportV.value);
  }
  return indvSupport;
}

function getTotal() {
  var indvSupport = getSupport();

  //set values
  var parentV = (indvSupport * 0.535).toFixed(2);
  var partnersV = (indvSupport * 0.0760).toFixed(2);
  var programsV = (indvSupport * 0.06).toFixed(2);
  var staffV = (indvSupport * 0.255).toFixed(2);
  var adminV = (indvSupport * 0.074).toFixed(2);

  //display result
  document.getElementById('parent').innerHTML = "$" + parentV;
  document.getElementById('partners').innerHTML = "$" + partnersV;
  document.getElementById('programs').innerHTML = "$" + programsV;
  document.getElementById('staff').innerHTML = "$" + staffV;
  document.getElementById('admin').innerHTML = "$" + adminV;
}

<form action="" id="calculator" onsubmit="return false;">&nbsp;
  <table align="center" style="border:none;">
    <tbody>
      <tr>
        <td style="font-weight: bold;">Total anticipated support:</td>
        <td>$&nbsp;<input id="support" name="support" oninput="getTotal()" type="text" /></td>
      </tr>
      <tr>
        <td>Parent Organization (53.5%)</td>
        <td>
          <div id="parent" style="float: right;">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <td>Supporting Partners (7.6%)</td>
        <td>
          <div id="partners" style="float: right;">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <td>Programs &amp; Support (6.0%)</td>
        <td>
          <div id="programs" style="float: right;">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <td>Staffing (25.5%)</td>
        <td>
          <div id="staff" style="float: right;">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <td>Administration (7.4%)</td>
        <td>
          <div id="admin" style="float:right;">&nbsp;</div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Or at https://jsfiddle.net/zimerhonzl/ub7z09oL/9/

This is a fairly basic form where the user inputs their donation and can see how it will be distributed. Upon entry in the main box the lower fields should auto populate.

It works in the stack snippet. It works in jsfiddle if you change the JavaScript to "No wrap", see https://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle — Barmar, Apr 18 '19 at 15:04
Without a demonstration of the problem, I don't know how we can help you fix it. Are there any errors in the console? — Barmar, Apr 18 '19 at 15:05
i don't see anything relevant to bootstrap, there is any other errors in the browser console? — shushu304, Apr 18 '19 at 15:05
check the console, your fiddle says that `getTotal` is not defined. It probably put your JS inside an [tag:IIFE] — Thomas, Apr 18 '19 at 15:06

score -1 · Answer 1 · answered Apr 18 '19 at 15:20

The "no wrap" solution in jsfiddle fixed the issue. On the actual site it turns out there was a code error above the snippet in the common.js file preventing the functions from loading properly. Unfortunately the CMS strips out any in-line javascript so I could not post the directly code above it on the actual page. Now the common.js file is properly loading the function prior to the form.

JavaScript calc function - no longer works after switching to Bootstrap4

1 Answers1