フォーム内のボタンがクリックされたときにページの更新を防ぐ

フォーム内のボタンの使用中に問題が発生しました。そのボタンで関数を呼び出して欲しい。できますが、ページが更新されるという望ましくない結果が生じます。

私の簡単なコードはこのようになります

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

ボタンをクリックすると、ページが更新されて関数が呼び出され、前のリクエストの結果である現在のページに影響する前のリクエストがすべてリセットされます。

ページの更新を防ぐにはどうすればよいですか？

ましょうgetData()リターン偽を。これで修正されます。

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

type="button"ボタンに追加します。

<button name="data" type="button" onclick="getData()">Click</button>

typeボタンのデフォルト値はですsubmit。これは、フォームを自分のケースに自動送信し、更新のように見せます。

あなたがする必要があるのはtypeタグを付けてtypeボタンを作ることだけです。

<button id="btnId" type="button">Hide/Show</button>

これで問題は解決します

問題は、フォームの送信をトリガーすることです。getData関数を作成return falseすると、フォームの送信が停止されます。

または、preventDefaultイベントオブジェクトのメソッドを使用することもできます。

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

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

buttonタグを使用する代わりに、inputタグを使用します。このような、

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

ボタンがデフォルトの「ボタン」の場合は、type属性を明示的に設定してください。そうでない場合、WebFormはデフォルトで送信として扱います。

あなたがjsを使うなら、このようにします

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

ボタン自体を無効にするJavaScriptメソッド

document.getElementById("ID NAME").disabled = true;

すべてのフォームフィールドが基準を満たしたら、ボタンを再度有効にすることができます

Jqueryを使用すると、このようなものになります

$( "#ID NAME" ).prop( "disabled", true);

Firefoxでは何らかの理由でreturn false;とmyform.preventDefault();関数を使用していますが、関数の実行後にページが更新されます。これが良い習慣かどうかはわかりませんが、私にとってはうまくいきjavascript:this.preventDefault();ます。action属性に挿入します。

先ほど述べたように、他のすべての提案を試しましたが、Firefoxを除くすべてのブラウザーで正常に動作します。同じ問題が発生する場合は、アクション属性javascript:return false;またはのいずれかにpreventイベントを追加してみてくださいjavascript:this.preventDefault();。javascript:void(0);あなたのコードを壊すでしょうかで試してはいけません。理由を聞かないでください:-)。

これはエレガントな方法だとは思いませんが、私の場合、他に選択肢はありませんでした。

更新：

エラーを受け取った場合... ajaxが処理された後、属性アクションを削除し、onsubmit属性で関数を実行してからfalseを返します。

onsubmit="functionToRun(); return false;"

Firefoxでこのような問題がすべて発生する理由はわかりませんが、これが機能することを願っています。

リターン関数がすべてのケースで機能しているわけではありません。私はこれを試しました：

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

うまくいきませんでした。

関数内でfalseを返そうとしたが、うまくいった。

function Reset()
{
    .
    .
    .
    return false;
}

私も同じ問題に直面していました。問題はonclick関数にあります。機能に問題はありませんgetData。onclick関数をfalseに戻すことで機能しました。

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

これは最良の解決策です：

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

注：私のコードは非常に単純です。

この問題を解決するには、ajaxとjqueryを使用できます。

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>