Wordpress TinyMCE Strips OnClick & OnChange (jQuery required)
Been searching for a long time to find a solution but cannot find one that suits my needs, so apologies if I missed anything.
On my Wordpress site I have a page with a button that in order to follow the link of that button needs to check the checkbox. 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 code to handle 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 from the bottom without checking the box, a popup will appear. Once they have checked the box, they are taken to the link to the button.
The problem I am facing is TinyMCE removes the "onchange" and "onclick" parts of the code. I guess because he doesn't like inline Java.
After a lot around me, it seems like the ideal solution is to handle this with jQuery in a separate file, but I have absolutely no idea how to do this.
If someone can help in this regard, or perhaps offer another job, then I'm all ears.
Thank you so much
source to share
Well ... yes, you can handle it with pure jQuery.
I gave you an example:
REMEMBER to add the jQuery library to your document, before <script>
and if possible before </body>
closing the 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're 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;
}
Finally, HTML : note that we are using an attribute data-href
for the link instead of a simple one href
, because 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/
source to share