javascript - 送信しない - submit ボタン false




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

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

通常の方法でボタンを設定し、event.preventDefaultを使用してください。

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

   In function...

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

jQueryを使用してボタンのリファレンスを取得し、その伝播を以下のように防ぐことができます。

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

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

            return false;
    });});

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

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

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

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

あなたのボタンのタイプを設定してください:

<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、別の方法がありますpreventDefault()を使用してイベントハンドラを配線し、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つの場所に保持し、デバッグを容易にします...ボタンのtypesubmitしてイベント・サーバー側を処理するsubmit戻すことでフォールバックを実装することもできます控えめなJavaScriptとして。


いつか前に私は非常に似たものが必要でした...そして私はそれを得ました。

そこで、私がここに書いているのは、ユーザーがボタン(通常は送信ボタン)を押したときにのみ、バリデーションと実行の検証なしにフォームを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>

フォームタグがonsubmit="..."持たない方法を見てください(それがないことを覚えています)。

問題は、 onclicktrueまたはfalse返しても、フォームは常に送信されることです。

type="button" 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のsubmit文も追加します。これは次のようなものです:

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つが不足している場合は、フォームを送信してはいけません! 問題があります。

問題を参照してください:ユーザーがボタンを押した場合にのみ1つのフィールドが空のときにフォームを送信しないでください。送信できる必要があるJavaScriptコードの場合はフォームを送信しないでください。

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

したがって、解決策はフォームタグに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" not type="submit" )をtype="button"すると、フォームは送信される前に検証が行われ、有効でない場合は送信されません。

他の人が長くて複雑なコードを試してみるのを助けることを願っています。 必要ない場合はonsubmit使用onsubmitず、 onclickを使用してください。 しかし、 type="submit"type="button"に変更することを覚えておいてくださいsubmit()を行うのを忘れないでください。


これはhtml5のようなエラーです、あなたはまだそれを使用して(JavaScriptと非javascriptの両方のユーザーをカバーしたい場合は)提出としてボタンを持つことができます:

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

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


私はFFで

removeItem 

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

javascriptのエラーが表示されたら、 "return false"コードは実行されず、ページをポストバックにします


私はShog9に同意するが、

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

w3schoolsよると<button>タグはさまざまなブラウザで異なる動作をします。


私は今これをテストすることはできませんが、jQueryのpreventDefault()メソッドを使うことができると思います。


簡単な方法があります:

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

});

return false;

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

それが起こる最後のものである限り、フォームは提出しません。







submit