Get URL after clicking on Submit button of a form

Question

I have a form and I want to retrieve it's URL after the Submit button is clicked.

What I've done so far is to Submit the <form> through JavaScript .submit() method , then store the URL using window.location.search into a variable and then I also alert() it.

When I fill the form for the first time, the alert doesn't show anything and when I fill it for the second time it returns the values that I filled the first time.

Note: I need to stay on the same page after clicking the Submit button.

Edit: The alert happens first and then the form gets submitted and the variables are appended to the URL.

Here is my code for reference:

<html>
    <body>
        <div>
            <h1>Form 1</h1>
            <form id="form1" method="GET">
                Number 1:<input type="text" id="num1" name="num1">
                <br>
                Number 2:<input type="text" id="num2" name="num2">
                <br>
                Number 3:<input type="text" id="num3" name="num3">
                <br>
                Number 4:<input type="text" id="num4" name="num4">
                <br>
                <button id="sub1" onclick="submitFunc()">Submit</button>
            </form>
        </div>
        <script>
            function submitFunc()
            {
                document.getElementById("form1").submit();
                var loc = window.location.search;
                alert(loc);
            }
        </script>
    </body>
</html>

after form submit your page will refresh so, i don't think you can do it — Ankit Kumar, May 03 '19 at 13:41
you must be knowing where you want to submit your page. so why you want to capture the URL — Ankit Kumar, May 03 '19 at 13:42
it's because when you use the "submit" the page it's refreshed but the second line get the initial `window.location`, before the submit action. And on the second time, the values already are on the URL. So it works :) — icaromh, May 03 '19 at 13:44
Actually I need the URL in Python PyQt5 and then use the URL string and get the field values of the form. — Enzy, May 03 '19 at 13:44
You'll need to send your form data using AJAX because when a form submits, the page refreshes and that is the root of your issue. — Scott Marcus, May 03 '19 at 13:50

Wendelin · Accepted Answer · 2019-05-03T14:03:11.203

I don't think you'll have any success with window.location.search. Instead you can get the data and search query from the form directly at any time like this:

document.getElementById("myForm").addEventListener('submit', (ev) => {
  //Optional, prevents redirect
  ev.preventDefault()
  
  //ev.currentTarget is the form element
  var data = new FormData(ev.currentTarget);

  //modification of the code from this answer: https://stackoverflow.com/a/24964658/7448536
  var queryParts = [];
  var entries = data.entries()
  for(var pair of entries)
    queryParts.push(encodeURIComponent(pair[0]) + "=" + encodeURIComponent(pair[1]))
  var query = queryParts.join("&")
  var loc = window.location;
  //reassemble the url
  var url = loc.protocol+'//'+loc.host+loc.pathname+'?'+query
  console.log(url)
})

<form id="myForm">
  <input name="test" type="text">
  <input name="example" type="text">
  <button type="submit">Submit</button>
</form>

Get URL after clicking on Submit button of a form

1 Answers1