フォームのリダイレクトを防ぐか、送信時に更新しますか？

たくさんのページを検索しましたが、問題が見つからないため、投稿する必要がありました。

送信ボタンのあるフォームがあり、送信したときに更新またはリダイレクトしないようにしたい。jQueryに機能を実行させたいだけです。

これがフォームです：

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

そしてここにjQueryがあります：

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}

フォームのアクション要素を使用して、または使用せずに試しましたが、何が問題なのかわかりません。私をもっと苛立たせているのは、それを完全に行う例があるということです： 例ページ

私の問題をライブでご覧になりたい場合は、stormink.net（私のサイト）にアクセスし、サイドバーに「Send me and email」と「RSS Subscription」と書かれていることを確認してください。どちらも私がこれを機能させようとしているフォームです。

submitイベントでフォームの送信を処理し、falseを返すだけです。

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

送信ボタンのonclickイベントはもう必要ありません。

<input class="submit" type="submit" value="Send" />

ここに：

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

onClickイベントを使用する代わりに、jQueryを使用して 'click'イベントハンドラーを送信ボタン（または任意のボタン）にバインドし、submitClickをコールバックとして受け取ります。イベントをコールバックに渡してpreventDefaultを呼び出します。これにより、クリックがフォームを送信できなくなります。

フォームの開始タグで、次のようにアクション属性を設定します。

<form id="contactForm" action="#">

が不足しているようですreturn false。

たとえば、HTML属性によってトリガーされたデフォルトのブラウザーエラー（クライアントコードのJS処理の前に表示されるエラー）を表示する場合：

<input name="o" required="required" aria-required="true" type="text">

submitイベントの代わりにイベントを使用する必要がありますclick。この場合、「このフィールドに入力してください」を要求するポップアップが自動的に表示されます。でもpreventDefault：

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

誰かが先に述べた、return false（フォームの送信に添付以上のハンドラがあるすなわち場合、彼らは実行されません）伝播を停止するだろうが、この場合には、ブラウザによってトリガアクションは常に最初に実行されます。return false最後にaがあっても。

したがって、これらのデフォルトのポップアップを削除するclick場合は、送信ボタンのイベントを使用します。

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes

別の解決策は、フォームタグを使用せず、jqueryを通じて送信ボタンのクリックイベントを処理することです。このようにすると、ページが更新されることはありませんが、同時に送信用の「Enter」ボタンが機能せず、モバイルでは移動ボタン（一部のモバイルではスタイル）が表示されないという欠点があります。したがって、フォームタグの使用に固執し、受け入れられた回答を使用してください。