Question

Having problem with jquery submit(). The problem is that it doesn’t work on the site, it sends me to the action url (as im using get) instead of preventing it and running the function inside the submit(). It works if add the submit()-script in the console. How come?

This is my js file:

$(function(ready){
  $('#contact-form button')
    .removeClass('disabled')
    .removeAttr('disabled');

  $('#contact-form').submit(function(e){
    alert('????????????????????????????');
    return false;
      e.preventDefault();

      $this = $(this);
      $this.addClass('disabled').attr('disabled', true);
      $('#contact-form img').addClass('showLoader');

      $.post('theme/widgets/contact-form/ajax/send-mail.php', $('#contact-form').serialize(), function(d){
        $this.removeClass('disabled').removeAttr('disabled');
        $('#contact-form img').removeClass('showLoader');

        try {
          $msg = $.parseJSON(d);
        } catch (e) {
          console.log(e, d);
          $msg.error = true;
          $msg.message = "Unknown error occoured. See console for more information.";
        }

        if (!$msg.error) {
          $('#contact-form input').val('');
          $('#contact-form textarea').val('');
        }

        alert($msg.message);
      });
  });
});

And this is my form:

$html = "<form id='contact-form'>
  <label>".__('name', false, $ld)."</label>
  <input type='text' name='name' /><br />
  <label>".__('email', false, $ld)."</label>
  <input type='text' name='email' /><br />
  <label>".__('body', false, $ld)."</label>
  <textarea name='body'></textarea><br />
  <img src='".THEME."images/ajax-loader-small.gif' />
  <button class='disabled' disabled='disabled'><span>".__('send', false, $ld)."</span></button>
</form>";

How come the jquery submit only reacts if i paste it into the console and not when the page loads? I am not getting any javascript errors and have tried with a lot of different jquery versions.

Answer 1

The problem is that the event is not firing. The code, you said, executes fine… after you fire the event manually. The events could not be firing for a few reasons… the first is usually because the events are wired up before the html is rendered. You could solve this by using delegates, but I believe (after ‘solving’ the problem) that your event is not firing because the event you are wiring is on form submission but you do not have a submit button on your form. You may want to try making the button a submit button, or making the code fire on the button click instead of the form submit.

Here’s the code for using delegates

$("body").delegate("#contact-form", "submit", function() {
    alert('????????????????????????????');
    return false;
      e.preventDefault();

      $this = $(this);
      $this.addClass('disabled').attr('disabled', true);
      $('#contact-form img').addClass('showLoader');

      $.post('theme/widgets/contact-form/ajax/send-mail.php', $('#contact-form').serialize(), function(d){
        $this.removeClass('disabled').removeAttr('disabled');
        $('#contact-form img').removeClass('showLoader');

        try {
          $msg = $.parseJSON(d);
        } catch (e) {
          console.log(e, d);
          $msg.error = true;
          $msg.message = "Unknown error occoured. See console for more information.";
        }

        if (!$msg.error) {
          $('#contact-form input').val('');
          $('#contact-form textarea').val('');
        }

        alert($msg.message);
      });
});

jQuery 1.7 call (recommended, delegates are much more efficient in 1.7 than older versions):

$("body").on("submit", "#contact-form", function() {
  //code here
});