web-dev-qa-db-ja.com

アクションのないフォームで、Enterキーを押してもページがリロードされないフォーム

送信ボタンのないHTMLフォームを作成する最も近い方法を探しています。それ自体は非常に簡単ですが、送信のようなことが行われたときにフォームがリロードしないようにする必要もあります（たとえば、 Enter テキストフィールドに）。

javascripthtmlforms
80
Matt Roberts

Onsubmitハンドラーを（プレーンjsまたはjquery $（）。submit（fn）を介して）フォームに追加し、特定の条件が満たされない限りfalseを返します。

フォームを送信したくない場合を除き、その場合は、フォーム要素の「アクション」属性を省略しないのはなぜですか？

42
K Prime

ページのリロードを防ぎ、HTML標準を維持するために、フォームにaction="javascript:void(0);"を含める必要があります。

173
Dutchie432

このイベントをテキストフィールドに追加するだけです。 Enterキーを押すと送信が禁止され、必要に応じて送信ボタンを追加したり、form.submit（）を呼び出したりできます。

onKeyPress="if (event.which == 13) return false;"

例えば：

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>
9
GenericMeatUnit

フォームでEnterキーを押すと、フォームの自然な動作が送信されます。この自然ではない動作を停止するには、jqueryを使用して（デフォルトの動作）送信しないようにする必要があります。

$("#yourFormId").on("submit",function(event){event.preventDefault()})
5
jsDevia

アイデア：

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

そして

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>
2
tom nobleman

解決する2つの方法：

  1. フォームのアクション値は「javascript：void（0）;」です。
  2. フォームにkeypressイベントリスナーを追加して、送信を防止します。
0
bill

最初の応答が最適なソリューションです。

Onsubmitハンドラーを（プレーンjsまたはjquery $（）。submit（fn）を介して）フォームに追加し、特定の条件が満たされない限りfalseを返します。

Jqueryでより具体的に：

$('#your-form-id').submit(function(){return false;});

フォームを送信したくない場合を除き、その場合は、フォーム要素の「アクション」属性を省略しないのはなぜですか？

Chrome拡張機能は、ユーザー入力用のフォームがあるかもしれませんが、送信したくない場合の例です。action= "javascript：void（0）;"を使用する場合、コードはおそらく動作しますが、最終的に この問題 になり、インラインJavascriptの実行に関するエラーが発生します。

アクションを完全に省くと、フォームがリロードされます。これはChrome拡張機能を記述するときに望ましくない場合もあります。または、何らかの計算機が組み込まれたWebページがある場合、ユーザーは入力を行い、「計算」またはそのようなものをクリックします。

0
skelliam