0

I am stuck. I have used the following snippet outside of WordPress with success, have insured that jQuery IS being loaded, but am still getting the 'unexpected token = '. I've tried removing the '$' from '$form', but then I get 'undefined is not a function'. Can someone please explain what I'm missing?

<head>
  //added via wp_enqueue
  <script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
</head>
<body>
...
<form id="testForm" action="process-page.php" method="post">
  <input type="submit" id="formSubmit" value="&nbsp;" />
</form>

<script>
// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function($) {
    $(this).on('submit',function(e) {
        var $form = $(this);
        if ($form.data('submitted') === true) {
          // Previously submitted - don't submit again
          e.preventDefault();
        } else {
          // Mark it so that the next submit can be ignored
          $form.data('submitted', true);
        }
    });
    // Keep chainability
    return this;
};

jQuery(document).ready(function($) {
    $('form').preventDoubleSubmission();
});
</script>
</body>
7
  • Can you include your markup? Feb 24, 2015 at 16:44
  • How are you including this script in your page?
    – user488187
    Feb 24, 2015 at 16:45
  • what version of jQuery are you using? Feb 24, 2015 at 16:46
  • what line are you getting the error?
    – atmd
    Feb 24, 2015 at 16:49
  • I am using v1.11.1 and am getting the error on the line: var $form = $(this); It is actually stripping out the $form - only shows var = $(this)
    – macgregor
    Feb 24, 2015 at 16:55

2 Answers 2

1

Just put your custom jQuery function inside the document ready block so it is in a scope to use $. Like so:

jQuery(document).ready(function($) {

    $.fn.preventDoubleSubmission = function() {
        $(this).on('submit',function(e) {
            var $form = $(this);
            if ($form.data('submitted') === true) {
              // Previously submitted - don't submit again
              e.preventDefault();
            } else {
              // Mark it so that the next submit can be ignored
              $form.data('submitted', true);
            }
        });
        // Keep chainability
        return this;
    };

    $('form').preventDoubleSubmission();

});
6
  • Yes should work. Beat me to it, cos it works on the site I am currently working on. Feb 24, 2015 at 18:16
  • That makes sense, but it still strips out the $form from var $form = $(this)... leaving me with the unexpected token = It only shows var = $(this)
    – macgregor
    Feb 24, 2015 at 18:47
  • I'd say then your problem lies elsewhere in your code, and not with the listed code, which I have tested and it works. That makes it difficult to try and guess what could be going wrong, but it really does sound like php is echo'ing the jscript to the document as I previously mentioned. Feb 25, 2015 at 5:32
  • Yes, @Gavin Simpson, I am going to test something and will report back.
    – macgregor
    Feb 25, 2015 at 15:57
  • 1
    @Gavin Simpson: I have found the unexpected token, which is in fact related to WP plugin making use of thickbox, but I still can't get the form button to disable after click. I have been able to create the page outside WP and get it work as at Kaloyan stated, so I'm continuing to trouble shoot.
    – macgregor
    Mar 2, 2015 at 15:28
-1

jQuery.fn.preventDoubleSubmission = function() {

should be

jQuery.fn.preventDoubleSubmission = function($) {"

methinks.

You should also not include jquery.js like this, but use enqeue rather. (<?php wp_enqueue_script('jquery');?>).

1
  • Yes, I changed to your suggested ...function($) { and I am using wp_enqueue, just added so the markup would be seen
    – macgregor
    Feb 24, 2015 at 17:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.