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

いくつかの問題があります...

idあなたのHTMLはこれを示しています（属性に注意してください）

<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 に答える