0

Web サイトに、自分の電子メール アドレスにプッシュするフォームがあります。以前、ajax 関数を作成する前は、フォームは私の電子メール アドレスに正常にプッシュされていました。唯一の問題は、ユーザーがフォームに記入すると、フォームの送信時に別のページに移動することです。私のフォームの HTML は以下のとおりです。 

            <form id="contact" method="post" action="E-mail-form.php" name="EmailFromMyWebsite">

                <label for="name">Name</label> <br>
                <input type="text" name="name" class="required" placeholder="Your Name" title=" (Your name is required)"> <br />

                <label for="email">E-mail</label> <br>
                <input type="email" name="email" class="required email" placeholder="Name@email.com" title=" (Your email is required)"> <br />

                <label for="message">Message/Comment</label> <br>
                <textarea name="message" class="required" placeholder="Leave a brief message" title=" (Please leave me a brief message)"></textarea> <br />

                <input type="submit" name="submit" id="submit" value="Send Message" />
            </form>
        </div><!-- /end #contact-form -->

私が書いたajax呼び出しは...

$("#submit").on('click', function(){
var formData = $('#contact').serialize();
$.ajax({
    type:"POST",
    data:"formData",
    url:"Email-form.php",
    success: function(data){
        $('#contact').html('<p>Your message has been sent</p>');
      }
   });
});

私の javaScript コンソールにはエラーが表示されないので、問題は jQuery ロジックにあると思います。Chrome で [送信] をクリックすると、自分のホームページにリダイレクトされます。Firefox ではフォームは送信されますが、別のページにリダイレクトされるため、AJAX 呼び出しが完全に無視されます。AJAX の経験がある人は、私が間違っていることを教えてもらえますか? また、通話に失敗した場合はメッセージを添付したいと思います。'failure:' を追加して、成功の場合と同じように値に関数を入れることはできますか?

4

2 に答える 2

2

あなたには2つの問題があります

  • フォームは正常に送信されています
  • 間違ったデータを投稿しようとしています

フォームが送信されないようにするには、jQuery クリック ハンドラーから false を返すか、イベント オブジェクトから preventDefault を呼び出します。変数の文字列ではなく、フォーム データとして
文字列を送信しています"formData"formData

$("#submit").on('click', function(event){
  var formData = $('#contact').serialize();
  $.ajax({
    type:"POST",
    data:formData,
    url:"Email-form.php",
    success: function(data){
        $('#contact').html('<p>Your message has been sent</p>');
      }
  });
  event.preventDefault();
  // or
  return false;
});
于 2013-08-05T00:28:37.827 に答える
1

AJAX 呼び出しもある場合でも、通常のフォーム送信アクションがまだ行われている可能性は十分にあります。これを簡単に修正するには、ボタンの種類を からsubmitに変更するだけbuttonです。そうすれば、クリック ハンドラーは引き続き機能しますが、フォームを単独で送信するという既定のアクションは実行されません。

<input type="button" name="submit" id="submit" value="Send Message" />
于 2013-08-05T00:24:15.800 に答える