Jquery / php表单必须单击Submit Twice为什么?

时间:2014-10-01 20:20:12

标签: javascript php jquery html5

我有一个简单的表单,包含jquery和php

每当有人点击提交按钮时,他们都必须点击两次

继承我的jQuery

    $('#submit_btn').on('click', function(){
      var post_data, proceed, user_email, user_message, user_name, user_phone;

      user_name = $("input[name=name]").val();
      user_email = $("input[name=email]").val();
      user_phone = $("input[name=phone]").val();
      user_message = $("textarea[name=message]").val();
      proceed = true;
      if (user_name === "") {
        $("input[name=name]").css("border-color", "red");
        proceed = false;
      }
      if (user_email === "") {
        $("input[name=email]").css("border-color", "red");
        proceed = false;
      }
      if (user_phone === "") {
        $("input[name=phone]").css("border-color", "red");
        proceed = false;
      }
      if (user_message === "") {
        $("textarea[name=message]").css("border-color", "red");
        proceed = false;
      }
      if (proceed) {
        post_data = {
          userName: user_name,
          userEmail: user_email,
          userPhone: user_phone,
          userMessage: user_message
        };
        $.post("contact_me_test.php", post_data, (function(response) {
          var output;
          if (response.type === "error") {
            output = "<div class=\"error\">" + response.text + "</div>";
          } else {
            output = "<div class=\"success\">" + response.text + "</div>";
            $('#contact-form-container').fadeOut(function(e){
              $('#form-success-message').fadeIn();
            });
            $("#contact_form input").val("");
            $("#contact_form textarea").val("");
          }
          $("#result").hide().html(output).slideDown();
        }), "json");
      }
    });

继承我的jQuery

是否需要在这里按两次东西?我在网上浏览了几个小时,有些人说你需要从中进行验证,但我已经尝试了,我得到了相同的结果。

关于表单的所有内容都运行正常,唯一的事就是您必须单击TWICE

1 个答案:

答案 0 :(得分:0)

尝试使用此代码:

$('#submit_btn').on('click', function(evt){
  evt.preventDefault();
  ... //Rest of code 
}