Reputation: 361

Uncaught TypeError is not a function

I have a form that I'm trying to submit via ajax and I'm having some issues that I don't understand.

So I have the following function defined at the top of my main.js:

function formSubmit() {
  var valid = true;
  $(this).find('input, select, textarea').each(function(index, el) {
    if(valid)
    {
      if($(el).is(':hidden'))
      {
        $(el).removeAttr('required');
      }
      if(!el.checkValidity())
      {
        valid = false;
        //el.focus();
      }
    }
  });
  if (!valid)
    return; // not ready to submit
  var options = {
    url:          document.location.origin + 'update.php',
    type:         'post',
    dataType:     'json',
    beforeSubmit: showRequest,  // pre-submit callback
    success:      showResponse, // post-submit callback
    error:        showError // post-submit callback
  };
  // bind form using 'ajaxForm'
  $(this).ajaxSubmit(options);
};

Later in my main.js I have the following line that is run when I click a button:

$('#contact-form').formSubmit();

Also in my main.js I have:

$('body').on('change', '#contact-form', formSubmit);

In my HTML:

<form name="contact" id="contact-form">
  <input type="text" name="name" value="" required>
  <input type="hidden" name="page" value="contact">
</form>

When I run the $('#contact-form').formSubmit(); line, I get the error:

Uncaught TypeError: $(...).formSubmit is not a function

However, when I simply edit the name field (triggering the "on change" line) it updates and runs the function just fine.

What am I missing?

EDIT: It looks like the outcome I'm looking for is not apparent, probably because I'm not super familiar with javascript.

What I was trying to do was have a button that ran the formSubmit() function such that the $(this) element in that function was the form element.

I thought I could just run $('#contact-form').formSubmit() to do that but apparently not?

How would I go about running the formSubmit() function such that $(this) in that function refers to the element with an id of '#contact-form'?

Upvotes: 0

Answers (3)

user5125586

Reputation:

Since you are using jQuery, try something like this:

+function ($) {

    $.fn.formSubmit = function() {
        var valid = true;
        $(this).find('input, select, textarea').each(function(index, el) {
          if(valid)
          {
            if($(el).is(':hidden'))
            {
              $(el).removeAttr('required');
            }
            if(!el.checkValidity())
            {
              valid = false;
              //el.focus();
            }
          }
        });
        if (!valid)
          return this; // not ready to submit
        var options = {
          url:          document.location.origin + 'update.php',
          type:         'post',
          dataType:     'json',
          beforeSubmit: showRequest,  // pre-submit callback
          success:      showResponse, // post-submit callback
          error:        showError // post-submit callback
        };
        // bind form using 'ajaxForm'
        $(this).ajaxSubmit(options);

        return this;
    }
}(jQuery);

That way, you should be able to use it like this: $("#contact-form").formSubmit();

Upvotes: 0