this.form.submit();に優れたjQueryソリューションがありますか?
-
03-07-2019 - |
質問
現在の要素があるフォームの送信イベントをトリガーしたい。時々機能することがわかっている方法は次のとおりです。
this.form.submit();
すべてのブラウザでメソッドが完全に動作することを100%確信しているわけではないので、おそらくjQueryを使用して、より良いソリューションがあるかどうか疑問に思っています。
編集:
現在の状況は次のとおりです。
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select></label>
</p>
</form>
<select>
の変更時にフォームを送信できるようにしたい。
私が探しているのは、フォームのIDや名前を知らなくても、フォーム内のどのフィールドでも機能するソリューションです。 $('form:first')
および$('form')
は、フォームがページの3番目になる可能性があるため機能しません。また、私はすでにサイトでjQueryを使用しているため、jQueryを少し使用することは大したことではありません。
では、jQueryにinput / select / textareaが含まれるフォームを取得させる方法はありますか?
解決
探しているのは次のようなものだと思います:
$(field).closest("form").submit();
たとえば、onchangeイベントを処理するには、次のようにします。
$(select your fields here).change(function() {
$(this).closest("form").submit();
});
何らかの理由でjQuery 1.3以降を使用していない場合、parents
の代わりにclosest
を呼び出すことができます。
他のヒント
this.form.submit();
これがおそらく最善の策です。特にプロジェクトでjQueryをまだ使用していない場合、この目的のためだけにjQuery(または他のJSライブラリ)を追加する必要はありません。
form.submitはいつでも JQuery-ize できますが、同じこと:
$("form").submit(); // probably able to affect multiple forms (good or bad)
// or you can address it by ID
$("#yourFormId").submit();
サブミットイベントに関数をアタッチすることもできますが、これは異なる概念です。
Matthew's に類似a>答え、次のことができることがわかりました:
$(this).closest('form').submit();
間違った:親機能を使用する際の問題は、フィールドが動作するためにフォーム内に即座に存在する必要があることです(tds、ラベルなどの内部ではありません)。
修正済み:親 s (s付き)も機能します。それを指摘してくれたThxs Paolo。
jQueryを使用するのが最適なソリューションであることがわかりました
$(this.form).submit()
このステートメントjqueryプラグイン(例: jqueryフォームプラグイン)を使用すると、正常に動作し、jquery DOMの走査オーバーヘッドが最小化されます。 。
<!> quot; current element <!> quot;の意味を説明していないという点で、あなたの質問はやや混乱しています。
すべての種類の入力要素とタイプ<!> quot; submit <!> quot;のボタンがあるページに複数のフォームがある場合、<!> quot; enter <!> quotを押します。フィールドに入力すると、そのフォームの送信がトリガーされます。 Javascriptは必要ありません。
しかし、複数の<!> quot; submit <!> quotがある場合;フォーム上のボタンと他の入力(例:<!> quot; edit row <!> quot;および/または<!> quot; delete row <!> quot;テーブル内のボタン)の場合、投稿した行はそれを行う方法。
別の方法(Javascriptは必要ありません)は、すべてのボタン(<!> quot; submit <!> quot;タイプのボタン)に異なる値を与えることです。このように:
<form action="...">
<input type="hidden" name="rowId" value="...">
<button type="submit" name="myaction" value="edit">Edit</button>
<button type="submit" name="myaction" value="delete">Delete</button>
</form>
ボタンをクリックすると、ボタンを含むフォームのみが送信され、ヒットしたボタンの値のみが(他の入力値とともに)送信されます。
次に、サーバーで変数<!> quot; myaction <!> quotの値を読み取ります。そして何をすべきかを決定します。
JQueryで呼び出すことができます
$("form:first").trigger("submit")
それがはるかに良いかどうかわからない。 form.submit();かなり普遍的です。
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select>
</label>
</p>
**<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
</form>
<!--
this.form.submit == this.form.elements['submit'];
-->