Implementing JavaScript in a PHP file (WordPress)

Question

I want to add JavaScript to my plugin php file, so that the 'checkout' button is only enabled when the user checks the terms and conditions checkbox.

I have found this solution in another user's question- but I'm having trouble implementing it to my php file in wordpress.

How do i disable a submit button when checkbox is uncheck?

I have created the checkbox and modified the button code in this function like you can see below:

function OutputContent_OnlineCheckoutButton()
    {
        echo '<input type="checkbox" id="checky"> I have read and agree to the <a href="#">terms and conditions</a>.<br/><input class="button-primary" id="postme" type="submit" disabled="disabled" name="'.$this->GetButtonID('checkout').'" value="'.__('Checkout', $this->myDomain).'"/>'."\n";

echo '<script language='JavaScript'>
$('#checky').click(function(){
     $('#postme').attr("disabled",!this.checked);   
});
</script>

'."\n";

    }

But the javascript doesn't seem to be working, how should I implement the javascript to make it work?

Thanks in advance.

PS

This is the original code I had for the button on its own.

function OutputContent_OnlineCheckoutButton()
    {
        echo '<input class="button-primary" type="submit" name="'.$this->GetButtonID('checkout').'" value="'.__('Checkout', $this->myDomain).'"/>'."\n";
    }

Michael Aaron Safyan · Answer 1 · 2014-03-02T14:59:09.187

In a PHP file, everything that is not between <?php and ?> simply gets copied to the output directly. Thus, rather than creating a function that echoes content verbatim, you should simply include the content in a section that is outside the <?php ... ?> tags, so that it just gets written directly to the output. That being said, this is still a poor way to organize your code. Instead of outputting <script> tags all over the place, it would be best to move your JavaScript to external files, and then put a single <script> tag at the bottom of the page (for the vast majority of your JavaScript) and possibly a <script> tag in the head section (for JavaScript that must run earlier).

I should add that the example code that you have specifies an invalid value for the "language". For JavaScript, you should just omit the language altogether, as it is understood to be JavaScript when it is omitted. (Also, you are probably confusing "language" with "type". The type for JavaScript is "text/javascript", but -- as I wrote earlier -- you should just omit this property altogether as it is superfluous and understood in absentia).

Hi Thanks for the answer. I have taken your suggestion and put the script in a separate file, I then linked the javascipt file in another file of the plugin where all the other scripts were defined. The javascript file is called when the page loads because I can see it in the source code (called tcbutton.js) but still doesn't work. Could you please have a look, my site is: http://pprinces.x10.mx/site/events/ — al3, Mar 02 '14 at 15:38

score 1 · Answer 2 · answered Mar 02 '14 at 14:53

1

It's hard to impossible to test for you based on this, but at least this error can be avoided:

echo '<script language='JavaScript'>

will not work, as you have ' within '. you should either escape them as so:

echo '<script language=\'JavaScript\'>

Or use ":

echo '<script language="JavaScript">

answered Mar 02 '14 at 14:53

Nanne

64,065
16
119
163

2

The attribute should be `type="text/javascript"` too, and for HTML5 I believe it can be omitted altogether. – halfer Mar 02 '14 at 14:55
probably true, though this'll work, so that's not the OP's issue per se – Nanne Mar 02 '14 at 14:57

Implementing JavaScript in a PHP file (WordPress)

2 Answers2