Problems with jQuery AJAX form

Question

I'm adapting a page to a client's needs from a template. There are two contact forms in the page, getting validated and posted to a PHP file through AJAX. One is out of the box, the other I've extended to include more fields, and am unsuccessfully trying to get the associated jQuery function to work.

The function is disabling the native functionality of HTML's "post," but does not actually result in an AJAX request (looking at the console).

I don't want to rewrite this whole mess of a function. If I'd written this thing I would have just overriden the functionality.

$(document).ready(function() {
  $("#subscribe").submit(function() {
    $("#subscribe .error").remove();
    var s = !1;
    if ($(".requiredField").each(function() {
      if ("" == jQuery.trim($(this).val())) {
        {
          $(this).prev("label").text()
        }
        $(this).parent().append('<span class="error">This field is required</span>'), $(this).addClass("inputError"), s = !0
      } else if ($(this).hasClass("email")) {
        var r = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if (!r.test(jQuery.trim($(this).val()))) {
          {
            $(this).prev("label").text()
          }
          $(this).parent().append('<span class="error">Invalid email address</span>'), $(this).addClass("inputError"), s = !0
        }
      }
    }), !s) {
      $("#subscribe input.submit").fadeOut("normal", function() {
        $(this).parent().append("")
      });
      var r = $(this).serialize();
      $.post($(this).attr("action"), r, function() {
        $("#subscribe").slideUp("fast", function() {
          $(this).before('<div class="success">Your email was sent successfully.</div>')
        })
      })
    }
    return !1
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="contact.php" id="subscribe" method="post" name="send">
  <span class="input input--kuro">
    <input class="subscriberequiredField  input__field input__field--kuro" id="name" name="name" type="text">
    <label class="input__label input__label--kuro" for="subscribeemail">
      <span class="mail input__label-content input__label-content--kuro">Name</span>
    </label>
  </span>
  <span class="input input--kuro">
    <input class="subscriberequiredField  input__field input__field--kuro" id="company" name="company" type="text">
    <label class="input__label input__label--kuro" for="subscribeemail">
      <span class="mail input__label-content input__label-content--kuro">Company</span>
    </label>
  </span>
  <span class="input input--kuro">
    <input class="subscriberequiredField subscribeemail input__field input__field--kuro" id="email" name="email" type="text">
    <label class="input__label input__label--kuro" for="subscribeemail">
      <span class="mail input__label-content input__label-content--kuro">Email</span>
    </label>
  </span>
  <span class="input input--kuro">
    <input class="subscriberequiredField input__field input__field--kuro" id="idea" name="idea" type="text">
    <label class="input__label input__label--kuro" for="subscribeemail">
      <span class="mail input__label-content input__label-content--kuro">The game-changing idea</span>
    </label>
  </span>
  <span>
    <button class="submit-button" id="submit" type="submit">Subscribe</button>
  </span>
</form>

Have you watched the AJAX request / response in the browser's developer tools? Are there any errors reported? — Jay Blanchard, Nov 15 '16 at 15:58
[Relevant to your sloppy email validator.](http://stackoverflow.com/q/201323/794749) — gre_gor, Nov 15 '16 at 17:04
@RoryMcCrossan, I know, if I'd written this thing I would have just overriden the functionality, but I don't want to rewrite this whole mess of a function... — Boris K, Nov 15 '16 at 17:22

score 0 · Answer 1 · answered Nov 16 '16 at 08:32

0

You should change this :

$("#subscribe").submit(function() {

into this:

$("#subscribe").on('click', (function() {

answered Nov 16 '16 at 08:32

T.Todua

53,146
19
236
237

score 0 · Answer 2 · answered Nov 16 '16 at 08:48

I have modified your code in plunker

https://plnkr.co/edit/zb1xBG9PNGM8w4F4Pm94?p=preview

Modified code

$("#subscribe").submit(function(event) {
    $("#subscribe .error").remove();
    event.preventDefault();

For custom submit

 $( "#subscribe" ).submit();

Problems with jQuery AJAX form

2 Answers2