javascript表单返回但无法正常工作

时间:2016-05-03 10:31:16

标签: javascript php jquery html

 function validateForm() {
    if ($('#date').val() == "") {
        $('#date').css("border","1px solid #FF0000");
        $('#date').focus();
        return false;
    }
    else if ($('#time').val() == "") {
        $('#time').css("border","1px solid #FF0000");
        $('#time').focus();
        return false
    }
    else if ($('#date').val() != "" && $('#time').val() != "") {
        var send = $.post("appointment.php",{
            package     : $('#package').val(),
            first_name  : $('#first_name').val(),
            last_name   : $('#last_name').val(),
            tel         : $('#tel').val(),
            email       : $('#email').val(),
            date        : $('#date').val(),
            time        : $('#time').val(),
        });

        send.success(function (result) {
            if (result == 'TRUE') {
                return true;
            }
            else if (result == 'FALSE') {
                return false;
            }
        });

        send.error(function () {
            alert("ajax error");
            return false;
        });

    }
    else {
        return true;
    }

}

<form name="step2" id="step2" action="./step3.php" onSubmit="return validateForm();" method="post">
...
</form>

即使一切都归零;仍然继续step3.php页面。我曾经尝试了很多次,结果相同。

我的appointment.php只返回echo&#34; TRUE&#34;或者&#34; FALSE&#34;。

知道我的编码有什么问题吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

此问题是因为validateForm在返回之前不会等待异步调用($.post)完成。

实现您所寻找目标的一种方法是始终return false。然后在成功时,手动提交,而不调用onSubmit功能。

function validateForm() {

  if ($('#date').val() == "") {
    $('#date').css("border", "1px solid #FF0000");
    $('#date').focus();

  } else if ($('#time').val() == "") {
    $('#time').css("border", "1px solid #FF0000");
    $('#time').focus();

  } else {

    var send = $.post("appointment.php", {
      package: $('#package').val(),
      first_name: $('#first_name').val(),
      last_name: $('#last_name').val(),
      tel: $('#tel').val(),
      email: $('#email').val(),
      date: $('#date').val(),
      time: $('#time').val(),
    });

    send.success(function(result) {

      if (result == 'TRUE') {
        $('#step2').get(0).submit();
      }

    });

  }

  return false;
}