Get the URL generated from a form on submit with JavaScript

Question

Is it possible to catch the URL generated from a form when firing its 'submit' event?

I know I can generate the URL from data

I'm not talking about form's action URL

I mean the ?field=value&other-input-name=value& ... part

Scenario:

We have a form and a JavaScript script which sends an Ajax request to a PHP script.

I usually do like this:

Register for the form's submit event
Prevent the default behavior
Construct a URL from data
Open an HTTP request with the constructed URL

Now, I was wondering, when firing 'submit' normally (on non-Ajax requests) the URL gets constructed by the form, which then uses that URL to send data to the PHP counterpart.

How can I 'catch' that URL? There aren't any clues from the event itself which doesn't seem to store it, or at least I haven't been able to find it.

It must be somewhere!

You can get the form's action attribute. If no action attribute is defined, then the current page is the target. — Robbert
– Robbert, Commented Feb 4, 2015 at 23:41

Greg · Accepted Answer · 2019-07-29 08:50:03Z

This is possible and easy with the objects URLSearchParams and FormData.

FormData is an object representation of a form, for using with the fetch API. It can be constructed from an existing element like this:

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

Then comes the URLSearchParams object, which can be used to build up query strings:

let search = new URLSearchParams(formData);

and now all you need to do is call the toString function on the search object:

let queryString = search.toString();

Done!

Some browser compat issues with URLSearchParams, lovely solution though!
Perfect, the more you use JavaScript the more you learn that there are still lots of things you need to learn.
I am still surprised that there needs to be an intermediate object between FormData and and the string. Like why isnt there a FormData.serialize function to print that string.

Peter Mortensen · Accepted Answer · 2020-08-02 14:10:54Z

If you mean getting the form's action URL, that URL can be retrieved like this:

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

If you are using jQuery and assuming you are doing an Ajax request, it would be like this:

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

Nope, I'm talking about the generated serialized URL data which gets constructed on submission, the [email protected]&name=myname ... part!
sorry buddy, don't yet have the privileges to comment and seek clarification, so posted this as an answer, thought that might've been what you are asking.

Peter Mortensen · Accepted Answer · 2020-08-02 14:14:10Z

As already stated, you cannot get the generated URL containing the form values that the browser generates, but it is very easy to construct it yourself.

If you are using jQuery then use serialize(). If not, refer to the post Getting all form values by 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>

e-neko · Accepted Answer · 2015-02-04 23:52:50Z

3

To put it simply, you can't. The best you can do is to collect the form field values yourself, or using jQuery's .serialize() function, which returns those values exactly as you'd expect:

name=value&name2=value2

answered Feb 4, 2015 at 23:52

e-neko

1,2849 silver badges13 bronze badges

4 Comments

vinzdef Over a year ago

I don't want it simple, I know I can get them from field as usual, please elaborate sir

e-neko Over a year ago

You can not intercept the request that form will send to the server.

Greg Over a year ago

Hello from the future, where it is possible to intercept HTTP requests in JavaScript.

e-neko Over a year ago

@Greg the only way I can think of for regular pages is via service workers - a very convoluted way at that. But thank you!

Peter Quiring · Accepted Answer · 2020-10-17 01:52:29Z

You can use javascript to generate it:

<script> function test(frm) { var elements = frm.elements; var url = "?"; for(var i=0;i<elements.length;i++) { var element = elements[i]; if (i > 0) url += "&"; url += element.name; url += "="; if (element.getAttribute("type") == "checkbox") { url += element.checked; } else { url += element.value; } } console.log(url); return false; } </script> <form onsubmit='return test(this);'> <input name=field1 value='123'> <input type=checkbox name=field2 checked> <input type=submit> </form>

Collectives™ on Stack Overflow

Get the URL generated from a form on submit with JavaScript

5 Answers 5

3 Comments

2 Comments

Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

4 Comments

Comments

Linked

Related