CODEWITHSUNDEEP
html
redux
redux

Reputation: 1167

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

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.

Upvotes: 0

Views: 1791

Answers (1)

Hektor
Hektor

Reputation: 1945

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

Upvotes: 1

Related Questions