web-dev-qa-db-ja.com

Javascriptで送信時にフォームから生成されたURLを取得します

'submit'イベントを発生させるときに、フォームから生成されたURLをキャッチできるかどうか疑問に思いました。

データからURLを生成できることはわかっています

フォームのアクションURLについては話していません

私は?field=value&other-input-name=value& ...の部分を意味します

シナリオ：

PHPスクリプトにajaxリクエストを送信するフォームとJSスクリプトがあります。

私は通常これが好きです：

  • フォームの送信イベントに登録する
  • デフォルトの動作を防ぐ
  • データからURLを構築する
  • 構築されたURLでHTTPリクエストを開く

さて、通常（ajax以外のリクエストで） 'submit'を起動すると、URLはフォームによって作成され、フォームはそのURLを使用してデータをphpの対応物に送信します。

そのURLを「キャッチ」するにはどうすればよいですか？イベント自体から、それを保存していないように見える手がかりがないか、少なくとも私はそれを見つけることができませんでした。

どこかにあるに違いない！

javascriptajaxform-submitdom-eventsonsubmit
12
vinzdef

簡単に言えば、できません。最善の方法は、フォームフィールドの値を自分で収集するか、jQueryの.serialize（）関数を使用することです。この関数は、期待どおりにこれらの値を返します。

name=value&name2=value2
3
e-neko

フォームのアクションURLを取得するという意味ですか？そのURLは次のように取得できます。

document.getElementById("form-id").action

JQueryを使用していて、ajaxを実行していると仮定すると、次のようになります。

var el = $('#form-id');
$.ajax({
    type: el.attr('method'),
    url: el.attr('action'),
    data: el.serialize(),
    context: this
}).done(callback);
3
thanix

すでに述べたように、ブラウザが生成するフォーム値を含む生成されたURLを取得することはできませんが、自分で作成するのは非常に簡単です。

JQueryを使用している場合は、serialize（）を使用します。そうでない場合は、この投稿を参照してください javascriptによるすべてのフォーム値の取得 。

var targetForm = $('#myForm');
var urlWithParams = targetForm.attr('action') + "?" + targetForm.serialize();
alert(urlWithParams);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="/search/"  id="myForm" method="get">
  <input name="param1" type="hidden" value="1">     
  <input name="param2" type="hidden" value="some text">   
</form>
3
Stuart

これは、オブジェクトURLSearchParamsおよびFormDataを使用すると可能で簡単です。

FormDataは、fetchAPIで使用するためのフォームのオブジェクト表現です。これは、次のような既存の要素から構築できます。

let form = document.forms[0];
let formData = new FormData(form);

次に、クエリ文字列を作成するために使用できるURLSearchParamsオブジェクトがあります。

let search = new URLSearchParams(formData);

これで、検索オブジェクトでtoString関数を呼び出すだけで済みます。

let queryString = search.toString();

完了！

1
Greg