web-dev-qa-db-ja.com

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

次のページでは、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>
javascripthtmlformsbuttonsubmit
784
Khanpo

あなたはHTML5のbutton要素を使っています。ここに見られるようにW3仕様で述べられるように、このボタンがデフォルトの送信の振る舞いを持っているという理由を覚えておいてください： W3C HTML5ボタン

そのため、その型を明示的に指定する必要があります。

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

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

=）

1528
Metafaniel

ボタンの種類を設定します。

<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メソッドを呼び出そうとしました - これは例外を投げ、ボタンのデフォルトの振る舞いをもたらしました。

それ以外にも、jQueryを使用してイベントハンドラを接続し、jQueryの event オブジェクトの 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として 。

573
Shog9

しばらく前に私は非常によく似たものが必要でした...そして私はそれを手に入れました。

それで、ここで私は、検証せずにJavaScriptでフォームを送信できるようにし、ユーザーがボタン（通常は送信ボタン）を押したときにのみ検証を実行する方法を説明します。

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

何が求められているのか覚えておいてください。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関数を必要としない人のためだけにこれを置きますが、ユーザーがボタンを押したときに何らかの検証を行います。

フォームタグにonsubmitが必要ないのはなぜですか？簡単です、他のJavaScript部分では送信を実行する必要がありますが、検証を行う必要はありません。

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

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

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

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

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

そのため、解決策はformタグをonsubmitしないことです。 Inseadは、それが本当に必要な場所に、ボタンの上に置きます。

反対に、概念的に私はonsubmitの検証をしたくないのでなぜonsubmitコードを入れます。ボタンの検証がほしいです。

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

では、なぜ人によっては（私が考えているか教えてください）それがオンスンビット検証で行われなければならないのでしょうか？いいえ、概念的にはクライアント側で妥当性検証を行っていません。ボタンが押されたときに何かをしているだけなので、それを実装しないようにしてはどうでしょうか。

そのコードとスタイルがうまく機能します。私がちょうど置いたフォームを送る必要があるどんな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()を実行することを忘れないでください。

28
z666zz666z

私は代わりに以下を使用するかもしれませんが、私はShog9に同意します。

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

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

24
poundifdef

HTMLフォームにid="form_id"があるとします。

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

結果を確認するには、このjQueryスニペットをコードに追加してください。

$("#form_id").submit(function(){
  return false;
});
17
Prateek Joshi

ボタンが送信されないようにする$("form").submit(function () { return false; });またはボタンの種類を<input type="button"/>の代わりに "button" <input type="submit"/>に変更することができます。これは、このボタンがこのフォームの唯一のボタンではない場合にのみ機能します。

14
Shiala

JQueryを使ってボタンの参照を取得し、以下のようにその伝播を防ぐことができます。

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

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

            return false;
    });});
11
Ata Iravani

これは言われているようなhtml5エラーです、あなたはまだそれを使用して送信としてボタンを持つことができます（もしあなたがjavascriptとnon-javascriptユーザの両方をカバーしたいなら）

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

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

9
sagits

私はFFでそれを確信しています

removeItem

関数はJavaScriptエラーに遭遇します、これはIEで起こりません

JavaScriptエラーが発生したときに「return false」コードが実行されず、ページがポストバックになる

7
Alin Vasile

これが簡単なアプローチです：

$('.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;

});
3
axiom82

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>
2
Sunil Dhappadhule

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

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

   In function...

   function myFunc(e){
       e.preventDefault();
   }
2
Vishal
return false;

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

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

2
Knickerless-Noggins

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

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

 <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>
1
The KNVB

メソッドにe.preventDefault();を追加するだけで、ページがフォームを送信できなくなります。

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

MDN Web Docs

EventインターフェースのpreventDefault（）メソッドは、イベントが明示的に処理されない場合、通常のようにデフォルトアクションを考慮に入れないことをユーザーエージェントに伝えます。イベントは、リスナーのいずれかがstopPropagation ()またはstopImmediatePropagation ()を呼び出しない限り、通常どおり伝播を続けます。どちらも伝播を終了します。

1
Mselmi Ali

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

JavaScriptの部分で関数removeItemを調べてください。

この線：

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

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

rows.eq(rows.length-1).html('');
0
ylebre

今はテストできませんが、jQueryの preventDefault メソッドを使用できると思います。

0
Tyler Rash