How to hide page content during redirect after form submit?

Viewed 24

I have a form that allows the user to change the account avatar, it works quite well. However, when the user clicks on the remove button, a redirect occurs and for a brief moment during the redirect the page layout is all broken.

This is the behavior of the page / url

when click on remove button, the page url goes from mywebsite.com/account/settings to mywebsite.com/account/settings/?rm_profile_image_id= after a few seconds again mywebsite.com/account/settings

When in that brief instant the page loads the url mywebsite.com/account/settings/?rm_profile_image_id= the broken layout is displayed. So, is there a way to hide the contents of this url with Javascript ?

This is the Original Js code that allows me to remove the avatar

// Delete Avatar
if (isset($_GET['rm_profile_image_id'])) {
   if ($attachment_id == $_GET['rm_profile_image_id']) {
   wp_delete_attachment($attachment_id);
   
   if (delete_user_meta($user_id, 'image')) {
      wp_delete_attachment($attachment_id);
   }

   ?><script>window.location = "https://www.mywebsite.com/account/settings";</script><?php
   exit();
   }
} else {
   echo '<a href=' . wc_get_account_endpoint_url('settings') . '?rm_profile_image_id=' . $attachment_id . '> ' . __('Remove') . ' </a>';
} 

Update: I changed the script, now I'm hiding the affected div when in the url there is ?rm_profile_image_id=, it's working, but still for a very short moment the page content is visible. Also I understand that it is exit (); which breaks the layout when redirect is performed.

Modified Script

if (isset($_GET['rm_profile_image_id'])) {
   if ($attachment_id == $_GET['rm_profile_image_id']) {
     wp_delete_attachment($attachment_id);
   
      if (delete_user_meta($user_id, 'image')) {
       wp_delete_attachment($attachment_id);
      }
      
      ?><script>
         window.onload = function() {
            if (window.location.href.includes('?rm_profile_image_id=')) {
               //Hide the element.
               document.querySelectorAll('.woocommerce')[0].style.display = 'none';
            } window.location = "https://www.motustrength.it/account/impostazioni/#?settings=avatar";
         };
      </script><?php
      exit();
   }
} else {
   echo '<a href=' . wc_get_account_endpoint_url('impostazioni') . '?rm_profile_image_id=' . $attachment_id . '> ' . __('Remove') . ' </a>';
}  
0 Answers
Related