Display message upon Switch button toggle

Question

I am using Bootstrap Switch to turn my check-box in toggle switches.

Now I want to display different messages based on whether the switch is ON or OFF. Sounds simple enough...but I can't seem to make it work :(

My HTML:

<div class="approve-delivery">
  <label for="config-email" class="control-label col-xs-5">
    Do you want to send out email?
  </label>
  <input type="checkbox" id="config-email" onclick="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/>
</div>

<div class="email-config-msg">
  <p id="enable-msg">
      All emails will be sent.
  </p>
  <p id="disable-msg">
      No email will be sent.<br/>
      Please remember, you must turn email ON again if you want emails to
      be sent during this login session.
  </p>
</div>

And my jQuery:

function ToggleSwitchMessage(checkId, firstCommentId, secondCommentId) {
  var check_box = document.getElementById(checkId)
  var first_alert = document.getElementById(firstCommentId);
  var second_alert = document.getElementById(secondCommentId);

  if (check_box.checked == true) {
    first_alert.style.visibility = "visible";
    first_alert.style.display = "inline-block";
    second_alert.style.visibility = "hidden";
    second_alert.style.display = "none";
  } else {
    first_alert.style.visibility = "hidden";
    first_alert.style.display = "none";
    second_alert.style.visibility = "visible";
    second_alert.style.display = "inline-block";
  }
}

Here is my working JSFiddle

Again, this is what I'm trying to do:

• based on the check-box checked/unchecked, the proper message should be displaying on the page when it loads
• then if the check-box's option is changed, it should display appropriate message

I hope I am making sense (English is not my first language)! Also I'm sorry if it's duplicate question, in that case please provide the URL of the Q/A(s).

Thank you in advance for your time and help!!

Answer 1

The problem with this code is that it tries to create the onClick event of the element than onChange. It works fine if you change it to onChange.

<input type="checkbox" id="config-email"
    onChange="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/>

As per displaying the message on the startup itself, call this function with the same arguments in your document.ready function.

UPDATE to your comment:

The following modified code works perfectly in your fiddle.

$(document).ready(function () {
    $("input#config-email").bootstrapSwitch( {
    onText: 'Enable',
    onColor: 'primary',
    offText: 'Disable',
    offColor: 'warning',
    size: 'normal'
  });

    ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')
});