Question

我在我的网站上有这个功能：

$(document).on('submit','form.contactform',function(){
$(".contactTable tr:last-child td:first-child").animate({
    'padding-left' : 5
}, 2000, function(){
    var url = "contactSubmit.php"; // the script where you handle the form input.
    $.ajax({
        type: "POST",
        url: url,
        data: $("#contactform").serialize(), // serializes the form's elements.
        success: function()
        {
            //window.location = 'index.php?send='.'succ'; // show response from the php script.
        },
       fail: function()
       {
           alert("An error has ocurred! :O");
       }
    });
});
return false;

}）;

我要做的是，当用户点击提交按钮时，我会在左侧设置一个小车，然后我提交表单。（是的，这是家庭作业）。但是发生的事情是在动画结束之前发送表单。有什么问题？

编辑：改为：

$("#contactform").submit( function() {
    var url = "contactSubmit.php"; // the script where you handle the form input.
    $.ajax({
        type: "POST",
        url: url,
        beforeSend:  $(".contactTable tr:last-child td:first-child").animate({'padding-left' : 5}, 2000),
        data: $("#contactform").serialize(), // serializes the form's elements.
        success: function()
        {
            window.location = 'index.php?send='.'succ'; // show response from the php script.
        },
       error: function()
       {
           alert("An error has ocurred! :O");
       }
    });
    return false;
});

但现在没有任何反应，表格只是发送

编辑2：这是表的html：

<form id= "contactform" class="contactform" method="post" action="contactSubmit.php">
    <table class="contactTable">
        <tr><td>Name</td> <td><input class="inputField" placeholder="John Doe" type="text" name="name" required></td></tr>
        <tr><td>Email</td><td><input class="inputField" type="text" placeholder="example@example.com" 
                   title="Please enter a valid email." name="email" pattern="[a-zA-Z]+@[a-zA-Z]+.[a-zA-Z]+(.[a-zA-Z]+)?">
                        </td></tr>

        <tr><td>Topic</td> <td>  <select class="inputField" name="topic">
                <option value="great">Compliment!</option>
                <option value="good">Neutral</option>
                <option value="bad">Bad!</option>
                <option value="other">What?</option>
        </select></td></tr>
        <tr><td>Car</td> <td> <select class="inputField" name="car">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
                </select></td></tr>
        <tr><td>Message</td><td><textarea class="inputField" name="msg" 
                                          placeholder="Your message here." required></textarea></td></tr>
        <tr><td><img src="resources/littleCar.png" alt="Little Car" class="littlecar"></td>
            <td><input type="submit" class="submitButton" value="Submit"></td>
        </tr>
    </table>
</form>

我有另一个jquery函数用于字段检查：

$(document).ready(function () {
    $('form').h5Validate();
});

Answer 1

将事件附加到表单本身而不是文档，并在AJAX中使用beforeSend，并且没有＆＃39;失败＆＃39; - 那应该是＆＃39;错误＆＃39;。

$("#contactform").submit( function(e) 
{
  e.preventDefault(); // prevent default behavior
  var url = "contactSubmit.php"; // the script where you handle the form input.
  $.ajax({
    type: "POST",
    url: url,
    beforeSend: /* animation here */, 
    data: $("#contactform").serialize(), // serializes the form's elements.
    success: function()
    {
      //window.location = 'index.php?send='.'succ'; // show response from the php script.
    },
    error: function()
    {
      alert("An error has ocurred! :O");
    }
  });
});

Answer 2

我看错了一件事是data值设置为#contactform，而不是.contactform。除此之外，也许您的表格单元格不允许更多填充或填充不够明显。

这是 jsfiddle ，其中padding-left的版本更为明显。

Answer 3

我可以在你的代码中清楚地看到两个问题，第一个是你应该用回调函数编写动画来处理动画完成后的一些东西。这可以使用complete函数的animate()选项来完成。需要注意的第二点是，您可以将padding-left更改为paddingLeft，因为这样可以多次解决此问题：

$(document).on('submit','form.contactform',function(e){
  $(".contactTable tr:last-child td:first-child").animate({
    paddingLeft: "+=5",
    duration: 2000,
    complete: function()
    {
      var url = "contactSubmit.php"; // the script where you handle the form input.
      $.ajax({
        type: "POST",
        url: url,
        data: $("#contactform").serialize(), // serializes the form's elements.
        success: function()
        {
          //window.location = 'index.php?send='.'succ'; // show response from the php script.
        },
        fail: function()
        {
          alert("An error has ocurred! :O");
        }
      });
    }
  });
  e.preventDefault();
});

Jquery动画不会等到它完成

3 个答案: