Question

我有以下表格。它的问题是，在我点击提交按钮后没有任何反应。表格刚刚消失。即使我在表单功能中插入警报，也不显示或删除

if(hasError == false){
    $(this).hide
};

为什么会这样？

<html><body><ul>
    <li><a href="#" title="Share with a friend"><span>NOTIFY A FRIEND</span></a>
        <div class="navLinks">
            <form name="send-to-friend" id="form2" action="">
                <label for="name" class="blockItem">Your Name</label>
                <input type="text" id="name" class="blockItem" name="your name" maxlength="60" size="30"/>
                <label for="emailFrom" class="blockItem">Your Email Address</label>
                <input type="text" id="emailFrom" class="blockItem" name="your email" maxlength="60" size="30" />
                <label for="friend-email" class="blockItem">Your friend's e-mail Address</label>
                <input  type="text" id="emailTo" class="blockItem" name="your friends email" maxlength="60" size="30"  />
                <input class="button" id="submitt2" type="submit" value="Send Message" />
                <input  class="button"  type="submit" value="Cancel"  />
            </form>
        </div>
    </li>
</ul></body></html>

CSS：

.navLinks {
    text-align: left;
    color: #b9cce4;
    background: #2C75D8;
    padding: 0 5px;
    z-index: 10000;
        background: #333;
    }
form {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    color: #222;
    text-decoration: none;
    padding: 1em;
    margin-bottom: 1em; 
    }   
label {
    margin: 10px 0 0 0;
    }
.blockItem {
    display: block;
    }
.button {
    display: inline;
    margin-top: 10px;
    }

JavaScript的：

    $('.navLinks').hide();

    //hide show the main nav content
    $(".nav a").on("click", function(e) {
        $(".navLinks").hide();
        $(this).siblings(".navLinks").show();
        e.preventDefault();
    });
    //error checking
    $("#submit2").click(function(){
          $(".error").hide();
          var hasError = false;
          var emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

          var nameVal = $("#name").val();
          if(nameVal == '') {
            $("#name").after('<span class="error">You forgot to enter the name.</span>');
            hasError = true;
          }

          var emailToVal = $("#emailTo").val();
          if(emailToVal == '') {
            $("#emailTo").after('<span class="error">You forgot to enter the email address to send to.</span>');
            hasError = true;
          } else if(!emailReg.test(emailToVal)) {
            $("#emailTo").after('<span class="error">Enter a valid email address to send to.</span>');
            hasError = true;
          }

          var emailFromVal = $("#emailFrom").val();
          if(emailFromVal == '') {
            $("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
            hasError = true;
          } else if(!emailReg.test(emailFromVal)) {
            $("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
            hasError = true;
          }

          if(hasError == false){
              $(this).hide();
              $.ajax({
                    type: "POST", 
                    url: "sendemail.php", 
                    data: data,
                    success: function(){ 
                     $("#loading").fadeOut(100).hide(); $('#message-sent').fadeIn(500).show(); } 
                });
          };
          return false;
    });

Answer 1

如果我理解你的$ .ajax函数什么都不做，除了隐藏电子邮件表单......

data: data

你在这里转移的是什么？从哪里提出来自提交表格的信息？

如果您想获得一些响应数据，请将其添加到您的成功函数中，如

success: function(data){
   //show it somehow
}

Answer 2

有几个问题......

您的HTML会显示此信息（请注意id属性）

<input class="button" id="submitt2" type="submit" value="Send Message" />

你的jQuery：

$("#submit2").click(function(){

您在click上的submit2事件以及该按钮的id上的submitt2是click。

我建议您不要听取提交按钮的submit事件，而是听取表单的$('#form2').submit(funciton(evt) { // your validation here // then to prevent submission evt.preventDefault(); }事件：

data: data,

.submit() function here和event.preventDefault() here

的文档

您尚未初始化数据参数

data: $('#form2').serialize(),

也许应该是

{{1}}

阅读.serialize() here

上的文档

基本的ajax-php表单

2 个答案: