How to change 1 CSS line after a new page within my website opens after clicking a link?-CodePudding

I would like to change 1 CSS line when you click a link in the website and a new page opens. I want to create a ‘order form’ link on a page, which goes to another page and then the order form should open up by changing the display to block of the div that contains the order form.

Is this possible, perhaps with Javascript? I have too little knowledge of Javascript therefore I am asking it here.

Thank you.

Best, Silvan

UPDATE: I have tried what @Simp4Code said but that does nothing. See screenshots for what I have done. This seems like a solid solution but so far no succes :(

CodePudding user response：

So in JavaScript I'd recommend doing this with cookies.

You need add a click event listener to the button. And set a cookie

const myButton = document.getElementById('myButton');

myButton.addEventListener( 'click', function(e) {
  document.cookie = 'orderForm=Visible';
});

Then to check if the cookie exists, if it does then the body will get a class of .orderFormVisible

if (document.cookie.match(/^(.*;)?\s*orderForm\s*=\s*[^;] (.*)?$/)) {
  document.body.classList.add('orderFormVisible');
};

Then using CSS you can leverage the class on the body to display the form, something like this

.orderFormVisible #orderForm { display: block }

I would recommend you do a bit of reading up about this, here's a useful MDN link where they go into details about security and a cookie max age and so on

Don't forget to clear the cookie after the order is placed!

CodePudding user response：

I'm dumb with understanding information, but maybe this will help you. Basically, you have two HTML pages one named main.html and the other named orderform.html. You can create a link anchor to create a nice link. You can then perhaps add a PHP page to handle all the server-sided actions.

I don't know if you can do this in javascript, to be honest.

CodePudding user response：

You can add a query param when redirecting to new page for ex -

window.open('http://www.yourwebsite.com?redirect=true','_blank')

Then you can check if "redirect" query param is present if it is you can handle accordingly.