Scribd
Upload
66 views4 pages

Ajax - Get The URL Generated From A Form On Submit With JavaScript - Stack Overflow

The document discusses how to get the URL generated by a form submission, including the query string of field-value pairs. It is not possible to directly access the URL, but it can be reconstructed by collecting the form field values and names using JavaScript. Multiple answers provide methods to serialize the form data into a query string, such as using the URLSearchParams and FormData objects, or manually concatenating field names and values.

Uploaded by

Sup' Tan'
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
66 views4 pages

Ajax - Get The URL Generated From A Form On Submit With JavaScript - Stack Overflow

The document discusses how to get the URL generated by a form submission, including the query string of field-value pairs. It is not possible to directly access the URL, but it can be reconstructed by collecting the form field values and names using JavaScript. Multiple answers provide methods to serialize the form data into a query string, such as using the URLSearchParams and FormData objects, or manually concatenating field names and values.

Uploaded by

Sup' Tan'
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Get the URL generated from a form on submit with JavaScript

Asked 6 years, 2 months ago Active 6 months ago Viewed 20k times

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

15 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!

javascript ajax form-submit dom-events onsubmit

Share Follow edited Aug 2 '20 at 14:09 asked Feb 4 '15 at 23:32
Peter Mortensen vinzdef
28k 21 94 123 1,097 1 9 20

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

5 Answers Active Oldest Votes

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:
4
name=value&name2=value2

Share Follow answered Feb 4 '15 at 23:52


e-neko
876 7 13

1 I don't want it simple, I know I can get them from field as usual, please elaborate sir – vinzdef Feb 4
'15 at 23:55

1 You can not intercept the request that form will send to the server. – e-neko Feb 4 '15 at 23:59

1 Hello from the future, where it is possible to intercept HTTP requests in JavaScript. – Greg Jul 29 '19 at
8:41

@Greg the only way I can think of for regular pages is via service workers - a very convoluted way at
that. But thank you! – e-neko Aug 1 '19 at 18:29

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

9 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!

Share Follow answered Jul 29 '19 at 8:50


Greg
19.1k 15 75 99

Some browser compat issues with URLSearchParams, lovely solution though! – Sam Holguin Nov 3
'19 at 16:22

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

4 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);

Share Follow edited Aug 2 '20 at 14:10 answered Feb 4 '15 at 23:42
Peter Mortensen thanix
28k 21 94 123 1,237 9 5

Nope, I'm talking about the generated serialized URL data which gets constructed on submission, the
[email protected]&name=myname ... part! – vinzdef Feb 4 '15 at 23:45

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. – thanix Feb 4 '15 at 23:50

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.
4
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>

Run code snippet Hide results Full page


Share Follow edited Aug 2 '20 at 14:14 answered Aug 16 '17 at 10:23
Peter Mortensen Stuart
28k 21 94 123 1,077 16 21

You can use javascript to generate it:

0 <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>

Share Follow edited Oct 17 '20 at 1:52 answered Oct 17 '20 at 1:22
Peter Quiring
1,490 1 12 19

You might also like