Supprimer la requête de recherche de l'url sans rafraîchir la page ?

Question

J'ai une tâche simple à accomplir ! Je veux que lorsque je soumets un formulaire et que j'obtiens un message de succès ou d'erreur du formulaire, j'aille directement au formulaire (en utilisant des ancres), donc pour ce faire, j'ai ajouté un paramètre dans l'URL de mon action from, comme ceci :

action="%%url%%?form-submitted=true"

Et lorsque le formulaire est soumis, j'ai écrit ce code :

// This script is for moving the page to the form is the page is loaded by submitting the form
let pageUrl = window.location.href;

let url = new URL(pageUrl);
let formSubmitted = url.searchParams.get("form-submitted");

if(formSubmitted){
    window.location.href = "#form-container";
}

Le code fonctionne parfaitement, je me déplace vers mon formulaire lorsque je soumets le formulaire, mais si je fais défiler la page et que je vérifie le diaporama par exemple, et que je décide de rafraîchir la page, le paramètre formulaire-soumis est dans l'URL, donc lorsque je rafraîchis, je vais à nouveau vers le formulaire, ce qui n'est pas agréable.

Pour résoudre ce problème, je dois supprimer le paramètre de requête de l'URL sans rafraîchir la page :

// This script is for moving the page to the form is the page is loaded by submitting the form
let pageUrl = window.location.href;

let url = new URL(pageUrl);
let formSubmitted = url.searchParams.get("form-submitted");

history.pushstate({}, null, '');

if(formSubmitted){
    window.location.href = "#form-container";
}

Je m'attendais à ce que mon domaine et la balise d'ancrage soient conservés, mais il semble que rien ne se passe.

Answer 1

Essayez d'ajouter l'url d'origine et le chemin d'accès uniquement à votre url param pour history.pushState :

let url = new URL(window.location.href);
history.pushState({}, null, url.origin + url.pathname);

Avec l'histoire Vous pouvez également utiliser une url relative :

let url = new URL(window.location.href);
history.pushState({}, null, url.pathname);

Voir aussi Constructeur d'URL (que vous utilisez déjà dans votre exemple).

La raison pour laquelle votre code original n'a pas fonctionné est que url en history.pushState() est facultatif, et une chaîne vide '' est faible. Dans votre cas, comme ce paramètre n'a pas été spécifié avec une valeur vraie, il a été défini comme l'URL actuelle du document.