web-dev-qa-db-ja.com

送信時にフォームのリダイレクトOR更新を禁止しますか？

たくさんのページを検索しましたが、問題を見つけることができないので、投稿しなければなりませんでした。

送信ボタンのあるフォームがあり、送信時にORリダイレクトを更新しないようにします。 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」を確認してください。両方とも私がこれを機能させようとしているフォームです。

javascriptjqueryhtmlforms
89
Ian Storm Taylor

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

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

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

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

ここに：

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 を呼び出します。これにより、クリックがフォームを送信できなくなります。

18
karim79

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

<form id="contactForm" action="#">
14
Brian Loughnane

return falseが欠落しているようです。

10
Jesse Kochis

別の解決策は、フォームタグを使用せず、jqueryを介して送信ボタンでクリックイベントを処理することです。この方法ではページの更新はありませんが、同時に送信用の「入力」ボタンが機能しないという欠点もあります。また、モバイルではgoボタン（一部のモバイルではスタイル）を取得できません。したがって、formタグの使用に固執し、受け入れられた回答を使用します。

3
Shishir Arora

表示されているデフォルトのブラウザエラーを表示する場合、たとえば、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があっても。

これらのデフォルトのポップアップを削除する場合、送信ボタンで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
3
CPHPython