ボタンがフォームを送信しないようにする方法

917

次のページでは、Firefoxでは、削除ボタンはフォームを送信しますが、追加ボタンは送信しません。削除ボタンがフォームを送信しないようにするにはどうすればよいですか？

<html>

<head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function addItem() {
            var v = $('form :hidden:last').attr('name');
            var n = /(.*)input/.exec(v);

            var newPrefix;
            if (n[1].length == 0) {
                newPrefix = '1';
            } else {
                newPrefix = parseInt(n[1]) + 1;
            }

            var oldElem = $('form tr:last');
            var newElem = oldElem.clone(true);
            var lastHidden = $('form :hidden:last');

            lastHidden.val(newPrefix);

            var pat = '=\"' + n[1] + 'input';

            newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"' + newPrefix + 'input'));
            newElem.appendTo('table');
            $('form :hidden:last').val('');
        }

        function removeItem() {
            var rows = $('form tr');
            if (rows.length > 2) {
                rows[rows.length - 1].html('');
                $('form :hidden:last').val('');
            } else {
                alert('Cannot remove any more rows');
            }
        }
    </script>
</head>

<body>
    <form autocomplete="off" method="post" action="">
        <p>Title:<input type="text" /></p>
        <button onclick="addItem(); return false;">Add Item</button>
        <button onclick="removeItem(); return false;">Remove Last Item</button>
        <table>
            <th>Name</th>

            <tr>
                <td><input type="text" id="input1" name="input1" /></td>
                <td><input type="hidden" id="input2" name="input2" /></td>
            </tr>
        </table>
        <input id="submit" type="submit" name="submit" value="Submit">
    </form>
</body>

</html>
javascript  html  forms  button  submit 
— かんぽ
ソース
どちらの回答をお勧めしますか？
— sanepete

回答:

1798

HTML5ボタン要素を使用しています。このボタンのデフォルトの動作は送信であることに注意してください。W3CHTML5ボタンは、W3仕様に記載されています。

したがって、そのタイプを明示的に指定する必要があります。

<button type="button">Button</button>

デフォルトの送信タイプを上書きするため。これが起こる理由を指摘したいだけです=）

=）

— メタファニエル
ソース
17
また、type属性の1つであるbuttonを含むHTML要素は、f＃$ 'nのデフォルトのタイプがsubmitであってはならないことも指摘しておきます。それは単なるばかげたもので、仕様に大きな誤りがあります。私は常にフォームでボタンを使用しており、たとえそれが（そうではない）エッジケースであっても、デフォルトのタイプを送信するようにしても意味がありません。
— dudewad 2015年
3
this今週のほとんどの時間を費やして、フォーム内のボタンを使用してモーダルを開くと、Electronアプリが「更新」されることに悩みました。それは一度発生し、その後アプリは期待通りに動作しました。何が起こっているのか全くわかりませんでした。これで終わりです！送信されるデフォルトのタイプに問題はありません。それについて学ぶのに5年かかったとはいえ、それはちょっとした落とし穴のようです。
— freethebees
4
ご参考までに、フォームにtype = resetがあることがわかりました。驚くばかり！
— Duong Nguyen
602

ボタンのタイプを設定します。

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

...これにより、イベントハンドラーで例外が発生したときに送信アクションがトリガーされなくなります。次に、removeItem()例外をトリガーしないように関数を修正します。

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

変更に注意してください。元のコードはjQueryセットからHTML要素を抽出し、その上でjQueryメソッドを呼び出そうとしました-これにより例外がスローされ、ボタンのデフォルトの動作が発生しました。

FWIW、これに対処する別の方法があります... jQueryを使用してイベントハンドラーを接続し、jQueryのイベントオブジェクトでpreventDefault（）メソッドを使用して、デフォルトの動作を事前にキャンセルします。

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

この手法により、すべてのロジックが1か所に保持され、デバッグが容易になります。またtype、ボタンのをオンに変更しsubmitてイベントをサーバー側で処理することにより、フォールバックを実装できます。これは控えめなものとして知られています。JavaScript。

— Shog9
ソース
4
type = "button"は、Firefoxで常に機能するとは限りません。jsが十分に複雑で、エラーが発生した場合でも、Firefoxはとにかくフォームを送信します。狂気！
— マシューロック
1
@MatthewLock：ほとんどありません-スクリプトのエラーはそのコードブロックをシャットダウンするだけで、アクションは通常どおり続行されます。jQueryイベントメソッドe.preventDefault（）やe.stopPropgation（）をメソッドの最初の行として呼び出してみてください。詳細については、stackoverflow.com
— questions / 2017755 /…
8
タイプ=ボタンは何に関係なく、しかしフォームを送信することはありません
— マシュー・ロック
1
return falseとても重要です。送信ボタン（onclick）に使用することもあります
— Jamie
7
ここではhtmlは奇妙だと思います。送信ではなく、デフォルトでtype = "button"にする必要があります。デフォルトで送信されるのを見るのはいつも予想外です。それは例外です。
— httpete 2015年
31

いつかとても似たものが必要だった...

したがって、ここに置くのは、ユーザーがボタン（通常は送信ボタン）を押したときにのみ検証を行わずにJavaScriptによってフォームを送信できるようにする方法であり、検証を実行する方法です。

この例では、2つのフィールドと1つの送信ボタンのみを含む最小限のフォームを使用します。

何が求められているかを覚えておいてください。JavaScriptから、チェックなしで送信できる必要があります。ただし、ユーザーがそのようなボタンを押すと、検証に合格した場合にのみ、検証を実行してフォームを送信する必要があります。

通常、すべてはこの近くの何かから始まります（私は重要ではない余分なものをすべて削除しました）：

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

formタグにどのようにしていないかを確認してくださいonsubmit="..."（それを持たないことが条件だったことを思い出してください）。

問題は、フォームがonclick返されるtrueかどうかに関係なく、フォームが常に送信されることですfalse。

に変更type="submit"するとtype="button"、動作するようですが動作しません。フォームを送信することはありませんが、簡単に送信できます。

だから最後に私はこれを使いました：

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

そしてfunction Validator、どこreturn True;に、JavaScript送信文も追加します。これは次のようなものです。

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

id=""ちょうどJavaScriptがされgetElementById、name=""それがPOSTデータ上に表示するだけのためのものです。

そのような方法でそれは私が必要とするように働きます。

これonsubmitは、フォーム上で機能を必要としない人々のためだけにありますが、ユーザーがボタンを押したときに検証を行います。

formタグでonsubmitが必要ないのはなぜですか？簡単です。他のJavaScriptパーツでは送信を実行する必要がありますが、検証を行いたくありません。

理由：ユーザーが送信を実行するユーザーであり、検証を実行する必要があるが、JavaScriptの場合、そのような検証では回避できるのに、送信を実行する必要がある場合があります。

それは奇妙に聞こえるかもしれませんが、たとえば考えている場合はそうではありません：ログイン時...いくつかの制限付き... PHPセッションの使用を許可しないなど、Cookieも許可されません！

そのため、すべてのリンクをこのようなフォーム送信に変換する必要があるため、ログインデータが失われることはありません。ログインがまだ行われていない場合、それも機能する必要があります。したがって、リンクに対して検証を実行する必要はありません。しかし、ユーザーがユーザーとパスの両方のフィールドに入力していない場合は、ユーザーにメッセージを表示したいと思います。したがって、いずれかが欠落している場合は、フォームを送信しないでください。問題があります。

問題を参照してください：ユーザーがボタンを押した場合にのみ1つのフィールドが空の場合、フォームを送信できません。フォームが送信可能でなければならないJavaScriptコードの場合。

onsubmitformタグで作業を行う場合、それがユーザーなのか他のJavaScriptなのかを知る必要があります。パラメータを渡すことができないため、直接渡すことはできません。そのため、検証を行う必要があるかどうかを判断する変数を追加する人もいます。検証関数の最初のことは、その変数の値などをチェックすることです...複雑すぎて、コードは本当に必要なものを言っていません。

したがって、解決策はフォームタグにonsubmitを持たないことです。Inseadは、本当に必要な場所にボタンを配置しました。

反対に、概念的に私はonsubmit検証を望まないので、なぜonsubmitコードを置くのですか？ボタンの検証が本当に必要です。

コードがより明確であるだけでなく、それはどこにあるべきかです。これを覚えておいてください：-JavaScriptでフォームを検証したくない（サ​​ーバー側のPHPで常に行う必要がある）-すべてのフィールドが空であってはならず、JavaScriptが必要であることを伝えるメッセージをクライアントに表示したい（クライアント側）

それでは、なぜ一部の人々（考えたり教えたり）は、オンサムビット検証で実行する必要があるのでしょうか。いいえ、概念的には、クライアント側でonsumbit検証を行っていません。ボタンが押されたときに何かをしているので、それを実装するだけではどうですか？

まあ、そのコードとスタイルは完全にトリックを行います。先ほど入力したフォームを送信する必要があるすべてのJavaScript：

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

そして、私がそれを必要としないとき、それは検証をスキップします。フォームを送信し、別のページをロードするだけです。

ユーザーがクリックした場合でも、（別名ボタンを提出しtype="button"ていないtype="submit"検証はフォームが提出され、有効なが送信されないされていない場合させる前に行われます）。

これが他の人が長くて複雑なコードを試さないのに役立つことを願っています。onsubmit不要な場合は使用せず、を使用してくださいonclick。ただし、変更type="submit"するtype="button"ことを忘れないでください。JavaScriptを使用することを忘れないでくださいsubmit()。

— z666zz666z
ソース
28

私はShog9に同意しますが、代わりに次のものを使用する場合があります。

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

w3schoolsによると、<button>タグはブラウザによって動作が異なります。

— Poundifdef
ソース
18

あなたのHTMLフォームが id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

このjQueryスニペットをコードに追加して結果を確認します。

$("#form_id").submit(function(){
  return false;
});
— プラテックジョシ
ソース
18

jQueryを使用してボタンの参照を取得するだけで、次のようにその伝搬を防ぐことができます。

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
— アタイラバニ
ソース
2
e.preventDefault(); e.stopPropagation();機能するためには十分です e.stopImmediatePropagation()これにより、Chromeで未定義のメソッドのエラーがスローされます。
— Subroto
14

$("form").submit(function () { return false; }); ボタンが送信されないようにするか、ボタンタイプを「ボタン」<input type="button"/>に変更<input type="submit"/> するだけで、ボタンがこのフォーム内の唯一のボタンでない場合にのみ機能します。

— シアラ
ソース
2
これはjQueryの場合であり、JavaScriptでの同等の機能は次のとおりです。
— Synexis 2013年
10

これは、言われたようなhtml5エラーです。次のように、ボタンを送信として（JavaScriptとJavaScript以外のユーザーの両方をカバーしたい場合）使用できます。

     <button type="submit" onclick="return false"> Register </button>

このようにして、送信をキャンセルしますが、jqueryまたはjavascript関数で行っていることは何でも行い、javascriptを持たないユーザーのために送信を行います。

— サジッツ
ソース
8

きっとFFでは 

removeItem

関数でJavaScriptエラーが発生しました。これはIEでは発生しませんでした

JavaScriptエラーが表示されると、「return false」コードが実行されず、ページがポストバックされます

— アリン・ヴァシル
ソース
8

falseを返すと、デフォルトの動作が妨げられます。ただし、falseを返すと、追加のクリックイベントが発生しなくなります。これは、この関数が呼び出された後に他のクリックバインディングがある場合、他のそれらは考慮されないことを意味します。

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

または単にあなたはこのように置くことができます

 <button type="submit" onclick="return false"> PostData</button>
— スニル・ダパドフール
ソース
7

e.preventDefault();メソッドを追加するだけで、ページがフォームを送信しないようにする必要があります。

function myFunc(e){
       e.preventDefault();
}

MDN Web Docsによると

EventインターフェースのpreventDefault（）メソッドは、ユーザーエージェントに対して、イベントが明示的に処理されない場合、通常のようにデフォルトのアクションを考慮しないように指示します。イベントは、そのリスナーコールの1ない限り、いつものように伝播し続けるstopPropagation ()か、stopImmediatePropagation ()伝播を終了いずれかが、。

— ムセルミ・アリ
ソース
6

ボタンを通常の方法で設定し、event.preventDefaultなどを使用します。 

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }
— ヴィシャル
ソース
4 
return false;

関数の最後または関数呼び出しの後にfalseを返すことができます。

それが最後に起こる限り、フォームは送信されません。

— WonderWorker
ソース
2

ここに簡単なアプローチがあります：

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});
— axiom82
ソース
1

次のサンプルコードは、ボタンのクリックがフォームを送信しないようにする方法を示しています。

あなたは私のサンプルコードを試すことができます：

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
— KNVB
ソース
0

関数removeItemには実際にはエラーが含まれています。これにより、フォームボタンはデフォルトの動作（フォームの送信）を実行します。この場合、JavaScriptエラーコンソールは通常、ポインタを表示します。

JavaScript部分の関数removeItemを確認してください。

この線：

rows[rows.length-1].html('');

動作しません。代わりにこれを試してください：

rows.eq(rows.length-1).html('');
— Ylebre
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.