0

我有下面的表格。它的问题是，在我单击提交按钮后，什么也没有发生。表格就消失了。即使我在表单功能中插入警报，它也不会显示或者如果删除 

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;
    });
4

2 回答 2

1

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

data: data

你在这里转移什么？提交表格中的信息在哪里写？

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

success: function(data){
   //show it somehow
}
于 2012-07-05T09:46:48.013 回答
1

有几个问题...

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

此处和此处的.submit()功能文档 event.preventDefault()

你还没有初始化数据参数

data: data,

也许应该是

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

阅读.serialize()此处的文档

于 2012-07-05T10:19:34.867 回答