Wordpress TinyMCE Strips OnClick & OnChange (need

Question

Searched a long time to find a solution, but can't find one specific to my needs, so apologies if I've missed something.

On my Wordpress site I have a page with a button, which in order to follow the link of that button a checkbox needs to be checked. This is the code for it...

<form action="#"><input onchange="toggleAccept()" id="agreeCheckbox" type="checkbox" /><label for="agreeCheckbox">I agree to the terms</label></form>

<a href="link/?cbur=a" id="accept" onclick="mustAccept(); return false;"><img src="button.png"/></a>

There's also some code handling this in the head:

    <script type="text/javascript">
function toggleAccept() {
var acceptLink = document.getElementById("accept");
var agreeCheckbox = document.getElementById("agreeCheckbox");
if (agreeCheckbox.checked) {
acceptLink.onclick=function() {
window.location=this.href + "&cbrblaccpt=true";
return false;
}
} else {
acceptLink.onclick=function() {
mustAccept();
return false;
}
}
}
function mustAccept() {
window.alert("Please check the box and agree to the payment terms of this recurring product.");
}

cbrblaccpt
  </script>

Basically, if someone tries to click the bottom without checking the box, the above popup appears. Once they check the box, they are taken to the button's link.

The issue I'm having is the TinyMCE is removing the "onchange" and "onclick" parts of the code. I'm guessing because it doesn't like inline Java being there.

After a lot of looking around it seems to me that the ideal solution is to handle this with jQuery in a separate file, but I have absolutely no idea how to do that.

If someone could help in that regard, or perhaps offer another work around then I'm all ears.

Thanks a lot

Answer 1

Well... yes you can handle it with pure jQuery.

I've made an example for you:

REMEMBER to add the jQuery library to your document, just before this <script> and if possible, just before </body> closing HTML tag :D

jQuery:

<script>
    $(document).ready(function () {
    var agree = $("#accept"); //we cache the element, dont worry

    $("#agreeCheckbox").click(function () {
        var checked_status = this.checked;
        if (checked_status === true) {
            agree.removeAttr("disabled");
        } else {
            agree.attr("disabled", "disabled");
        }
    });
    //we convert the button into an anchor
    agree.click(function () {
        window.location = $(this).data("href") + "&cbrblaccpt=true";
        });
    });
</script>

CSS: Because we are using a button instead of an anchor (<a></a>)

#accept {
    background: url(http://goo.gl/kCsKU3) center top no-repeat;
    color: #FFF;
    display: block;
    width: 200px;
    height: 44px;
    border:none;
    outline: none;
    cursor: pointer;
}
#accept:disabled {
    opacity: 0.6;
}
#accept:active {
    margin-top:2px;
}

And finally, the HTML: Note we're using data-href attribute for the link instead of a simple hrefbecause this is a button, not an anchor anymore.

<input id="agreeCheckbox" type="checkbox" />
<label for="agreeCheckbox">I agree to the terms</label>
<button data-href="link/?cbur=a" id="accept" disabled="disabled"></button>

JsFiddle: http://jsfiddle.net/n2zej2cg/