HTML Form to Remove ?get=info on POST Submit?

Question

I have several pages that are arrived on with valid GET data, such as http://website.com/?id=12345

I have a generic HTML form that is pulled onto many different pages using php's "require" and submits using POST. Regardless of which page this form is located on, it should always submit back to that same page. However, after the form is submitted, I would like the ?id=12345 to be stripped out.

So, for example, if the user is on http://website.com/new.php?id=12345, it should post back to http://website.com/new.php. If the user is on http://website.com/old.php?id=12345, that same form it should post back to old.php

Previously the best solution I found was to style the form as such:

<form action="?" method="POST">

Which will change all links to http://website.com/new.php? or http://website.com/old.php? which is very close, but not perfect.

As it turns out, I finally found the solution to my problem by using JavaScript:

url = location.href;
qindex = url.indexOf("?");

This can pull whatever is on the address bar as a string and find the index of the first ? mark. From there:

if(qindex != -1)

tells me that there is a ? mark

var plainUrl = url.substring(0, qindex);

Can get, as a string, everything up to the ? mark, but not after. Finally:

window.location.replace(plainUrl);

Will rewrite the address bar to the plain URL, not including the ? or whatever comes after, and without redirecting the browser.

No, that is not possible using HTML alone. But a form that posts back to the same address would most likely have some server-side language process the sent data anyway, right? So it should be possible to dynamically set the action to the current URL – stripped of the unwanted GET parameter, if necessary – as well. — CBroe, Mar 18 '16 at 19:44
CBroe means your suggestion - 'pure HTML posting back to itself without using GET' - is not possible, rather than j08691's suggestion. See also the first answer here: http://stackoverflow.com/questions/13650408/hide-variables-passed-in-url for an interesting approach. — Hektor, Mar 18 '16 at 19:46

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

Since your page will not undergo any server-side processing, you can achieve what you want via a combination of the following two tricks. First, change your particular querystring to a hash, which is thereafter directly editable without triggering a page reload:

http://yourdomain.com/page.html#search=value

Then modify such a script as this to do what you want to do, according to the query string passed in.

        <script type='text/javascript'>
          // grab the raw "querystring"
          var query = document.location.hash.substring(1);

          // immediately change the hash
          document.location.hash = '';

          // parse it in some reasonable manner ... 
          var params = {};
          var parts = query.split(/&/);
          for (var i in parts) {
            var t = part[i].split(/=/);
            params[decodeURIComponent(t[0])] = decodeURIComponent(t[1]);
          }

          // and do whatever you need to with the parsed params
          doSearch(params.search);
        </script>

now you can delete the query string suffix in the following way:

As detailed elsewhere, namely hide variables passed in URL, it's possible to use JavaScript's History API in modern browsers.

    history.replaceState({}, null, "/index.html");

That will cause your URL to appear as /index.html without reloading the page

This little gem is explained in more detail here:

https://developer.mozilla.org/en-US/docs/Web/API/History_API

edited May 23 '17 at 11:44

Community

1
1

answered Mar 18 '16 at 20:06

Hektor

1,845
15
19

That's really cool! To clarify though, the form itself is loaded remotely onto PHP pages that use the ?get to set up the forms, but after the forms are submitted they should post back to the same page. There will be server side processing contingent on the initial ?get, and also once the form is submitted to post back to itself. – redux Mar 18 '16 at 20:20
I'm not entirely sure what the problem is. Why exactly are you wanting to strip the "?get=something" out of the link? Either way, hopefully this arcane solution, modded to suit your purposes, will help get you there. – Hektor Mar 18 '16 at 20:24
Hektor, in my case after the person hits submit I want to check their submission against a database & if they have any problems with the form I can kick them back to the form with a ?error=name_too_long. Once they resubmit the form, I don't want it posting to ?error=name_too_long or the page thinks there's a problem – redux Mar 18 '16 at 20:59
Can't you avoid the hassle by using an AJAX call to the server? – Hektor Mar 19 '16 at 00:09
Possibly, I haven't tried. I was hoping for a simple solution for a self-referential link that doesn't include ?get flags, in the same way that a form action="?foo" will simply append ?foo onto the end of the address. – redux Mar 19 '16 at 01:28

HTML Form to Remove ?get=info on POST Submit?

1 Answers1