Question

我正在通过模板调整页面以满足客户的需求。页面中有两个联系表单，通过AJAX验证并发布到PHP文件。一个是开箱即用的，另一个是扩展到包含更多字段，并且尝试使相关的jQuery函数无法正常工作。

该功能正在禁用HTML＆＃34; post，＆＃34;的本机功能。但实际上并没有产生AJAX请求（查看控制台）。

我不想重写这个功能的整个混乱。如果我写了这个东西，我就会覆盖这个功能。

＆＃13;

$(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
  })
});

＆＃13;

<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>

＆＃13;

Answer 1

你应该改变这个：

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

进入这个：

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

Answer 2

我在plunker中修改了你的代码

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

修改后的代码

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

自定义提交

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

jQuery AJAX表单的问题

2 个答案: