◆ Firefox でaction 属性未指定の form の action プロパティにそのページの URL が入ってる
◆ IE/Chrome/Edge と昔の Firefox (45 で確認) では空文字になる
◆ Firefox 56, 57 で確認

久々に teratail を見てたときにたまたま見つけた質問
Firefox56 である処理が動かなくなったと言うもの
動かなくなったということは 内部の処理が何か変更されたのでしょうけど 何が変わったのか気になったので調べてみました

ExtJS

ExtJS というライブラリでの処理で form を submit した時の挙動が違うようです
ExtJS は名前を聞いたことあるくらいで全然使ったことないです

バージョンは不明でしたが使われてるメソッドを調べると 3 系らしいので 3 系を cdn からロードして

const formpanel = new Ext.FormPanel(data)
formpanel.getForm().submit()

と実行してみると挙動が違いました

form.action

かるーく見た限りでは ExtJS は jQuery などと比べると 1 つ 1 つのメソッドはシンプルなのが多くて submit メソッドもこれだけでした

submit: function(b) {
b = b || {};
if (this.standardSubmit) {
var a = b.clientValidation === false || this.isValid();
if (a) {
var c = this.el.dom;
if (this.url && Ext.isEmpty(c.action)) {
c.action = this.url
}
c.submit()
}
return a
}
var d = String.format("{0}submit", this.api ? "direct" : "");
this.doAction(d, b);
return this
},

今回は standardSubmit が true なので if 文の方の処理です

formpanel コンストラクタに渡したオブジェクトが this で参照できます
また this.el.dom は生の form 要素になります

if (this.url && Ext.isEmpty(c.action)) {
c.action = this.url
}

ここは url が設定されていて form のアクションが空なら設定するという動作です
この時点では form の action は未指定なので空になるはずなのですが……

Firefox では自身の URL が取得されていました


これが原因で 自分で指定した URL ではなく自分自身のページに POST/GET される動きになっていました

ブラウザ仕様的に

var form = document.createElement("form")
document.body.appendChild(form)
console.log(form.action)

というコードを実行した場合
Chrome/IE/Edge
昔の Firefox
""
Firefox 56,57location.href

という動きになっています

ブラウザの動きとしては action 未指定は自身へ submit するので Firefox の動きであってるようには思うのですけど Chrome が空文字なのでどっちがあってるのかよくわかりません
whatwg のドキュメントを軽く見てみましたが空文字ならどうこうというのは見つけれなかったので 答え合わせもなしです


とりあえず未指定を判定するなら プロパティでなく属性を getAttribute("action") で取るのが良さそうです

Firefox の devtools はまだイマイチ

たったこれだけなのに調べるのに 1 時間近く時間かかってしまいました

というのも Firefox のデバッガの動きが変です

大規模なライブラリを minify したものを扱うのは苦手みたいです
pretty print 機能はあるのですが 20000 行目くらいから インデントはなくなってキレイな表示じゃなくなります
ついでに ステップ実行機能がおかしくて実行されてないところがハイライトされていたりで まともに使えませんでした

結局

formpanel.getForm().submit2 = function(){/*~~*/}

こんな感じで本来の中身を整形してコピーしたものを自作関数として追加して実行させていました
その整形して取り出すのに使ったのが Chrome だったりして まだまだ devtools は Chrome が優れてるなぁ とか思ってました

追記

変更点をまとめてるサイトにちゃんと載っていました

この変更みたいです
https://www.fxsitecompat.com/en-CA/docs/2017/html-form-s-action-property-now-returns-document-url-if-action-attribute-is-empty-or-missing/

アクション属性が空はみつからないときは document URL を返すという変更です
「Affecting」 なので既存のコードに影響する変更点ですね

MDN の HTMLFormElement のページにも注意書きされていました

[1] In Firefox 56, the implementation has been updated so that the action property returns the correct form submission URL, as per spec (bug 1366361).


whatwg のスペックでは

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fs-formaction

The action IDL attribute must reflect the content attribute of the same name, except that on getting, when the content attribute is missing or its value is the empty string, the element's node document's URL must be returned instead.

action IDL 属性 (action プロパティ) は同名の content 属性を反映しないといけません
ただし content 属性が見つからないか空文字列ならその要素の document の URL を代わりに返さないといけません

という文がありました


ちゃんとした仕様通りということですね
ということは Chrome も近々変わるのかもしれません

今の Chrome (62) は
action 属性が空 → document の URL
action 属性が無い → 空文字列
です

Chrome が仕様通りになっても IE 変更されないので 将来 IE だけ動きおかしい って困る人がでてきそうですね