Fire off javascript function if query string is present

Question

So I have a form that I'm using that once the submission is successful, it adds a ?success query string to the URL.

With the below code, whenever a user reaches the ?success page, it will prevent them from hitting the back button which helps prevent submissions to the database - The issue is, if I have server sided errors, it will prevent the back button on the whole page until the cache is cleared.

function disableBack() {
    window.history.forward()
}

window.onload = disableBack();
window.onpageshow = function(evt) {
    if (evt.persisted)
        evt.preventDefault();
    disableBack()
};

How can I make the following javascript snippet fire off once the ?success query string is present only? I've tried the following code but had no luck:

if (location.search === "?success") {
    // Prevent the form from being resubmitted on backspace
    function disableBack() {
        window.history.forward()
    }

    window.onload = disableBack();
    window.onpageshow = function(evt) {
        if (evt.persisted)
            evt.preventDefault();
        disableBack()
    };
}

Updated answer (It still redirects back):

function disableBack() {
    window.history.forward()
}

var includesURLSearchString = searchString => location.search.includes(searchString);
var hasQueryString = includesURLSearchString('success');

console.log(hasQueryString);

if (hasQueryString) {

    // Prevent the form from being resubmitted on backspace
    window.onload = disableBack();
    window.onpageshow = function (evt) {
    if (evt.persisted)
        evt.preventDefault();
        disableBack()
    };
}

Does this answer your question? [How to retrieve GET parameters from javascript?](https://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript) — devlin carnate, Jan 13 '20 at 20:37
@devlincarnate, not exactly - `window.location` does return all ? query strings, but not specific ones .. I have two like `?site=..?success` - I'd like to just target one query string. — , Jan 13 '20 at 20:49
You shouldn't have parentheses in `window.onload = disableBack()`. You're calling the function immediately instead of assigning it to `window.onload`. — Barmar, Jan 13 '20 at 21:16
Preventing users from hitting the back button sounds quite annoying for the users! A submission page should have the user making a POST request, and any modern browser of consequence will automatically resist the user trying to page-back to a form submission to avoid exactly the scenario you're trying to solve. Is there a good reason to go above and beyond the browser's behavior? — Klaycon, Jan 13 '20 at 21:28

Emiel Zuurbier · Accepted Answer · 2020-01-13T23:35:58.263

location.search has a string as value. You can check if a string contains a certain word with the includes method. Consider the function below.

const includesURLSearchString = searchString => location.search.includes(searchString);

You could use this function to check if the word, like search, is found in the location.search string. So a value of ?site=something&success would return true.

const hasQueryString = includesURLSearchString('success');
if (hasQueryString) {
  disableBack();
}

Edit

The URLSearchParams interface is meant to be used for this purpose. Instead of creating your own function which checks the string you could use this API to deconstruct the query string. With the has method you can check if a value is present.

const searchParams = new URLSearchParams(location.search);
const hasQueryString = searchParams.has('success');
if (hasQueryString) {
  disableBack();
}

If you are trying to disable the back button of your browser, then try the following. This function will programmatically add a URL to your browser's history. Whenever a user tries to go back the popstate event is fired. This event is triggered whenever a state that has been added in JS is removed from the history. Now whenever a user goes back, it simply adds the current URL again to the history. So the user can never go back.

Original post with this solution:

function disableBack() {
  history.pushState(null, null, location.href);
  window.addEventListener('popstate', function () {
    history.pushState(null, null, location.href);
  });
}

This is perfect @Emiel, unfortunately, now it still goes back even with that included where the first script that I provided didn't. — , Jan 13 '20 at 21:13
I've updated the answer at the bottom - I'm guessing my call inside `hasQueryString` aren't firing anymore. — , Jan 13 '20 at 21:14
Updated the answer. Try it again. Are you changing the URL after form the form submit by redirect or with `window.location.pushState`? — Emiel Zuurbier, Jan 13 '20 at 21:22
Thanks again for the help, tried that method with no luck - I'm guessing it depending on the `window.onload` listener - As far as mailing, I'm using PHPMailer and then executing the redirect using `header('Location: ' . $url);` in PHP. — , Jan 13 '20 at 21:25
I think that your problem lies in your `disableBack` function which does not what you want it too? Or does it? Anyway, I've updated my answer with a new version of your `disableBack` function which works differently. — Emiel Zuurbier, Jan 13 '20 at 21:34

Fire off javascript function if query string is present

1 Answers1

Edit