Make button disappear permanently [closed]

I have a situation, when the user clicks a button in page A the button will disappear and go to page B. and when the user goes back to page A, the button will still disappear. Is it possible to do this? Is this sounds logical?

<table>
<tr>
<th>Booking Number</th>
<th>checkin</th>
<th>checkout</th>
<th>Num. of days</th>
<th>Total Charges</th>
<th>Breakfast</th>
<th>accommodation ID</th>
</tr>
<c:forEach items="$books" var="book">
<tr>
<td><c:out value="$book.bookingnum" /></td>
<td><c:out value="$book.checkin" /></td>
<td><c:out value="$book.checkout" /></td>
<td><c:out value="$book.numofdays" /></td>
<td><c:out value="$book.totalcharges" /></td>
<td><c:out value="$book.bfast" /></td>
<td><c:out value="$book.accid" /></td>
<td>
<form name="reserveSubmitForm" method="post" action="Payment1Controller?action=createPayment&bookingnum=<c:out value="$book.bookingnum"/>">
<input type="submit" class="btn btn-primary btn-block" value="Pay">onclick="style.display = 'none'"
<input type="hidden" name="totalcharges" id="totalcharges" value="$book.totalcharges"/>
</form>
</td>
</tr>
</c:forEach>
</table>


This question appears to be off-topic. The users who voted to close gave this specific reason:

2 Answers
2

When the button is clicked, you can set a value in sessionStorage. Also, on page load, check to see whether that value exists in sessionStorage, and if it does, hide the button. For example:

sessionStorage

sessionStorage

<a href="foo">foo</a>


JS:

const a = document.querySelector('a');
if (sessionStorage.clickedA) a.style.display = 'none';
a.addEventListener('click', () =>
sessionStorage.clickedA = 'clicked';
);


https://jsfiddle.net/qfsuLyc3/

I don't think cookies are a good idea because it's information that seems to be only relevant for the client, not the server. (cookies will be sent to the server)

sessionStorage persists over a page session. If you want the button to be hidden even after the browser is reopened, use localStorage instead, which uses the file system, rather than memory, and is persistent.

sessionStorage

localStorage

sessionStorage

localStorage

'click'', function() { ...

If you want this on a temporary basis, you can use GET method. You can pass an additional value in the URL from page two to page one, and check if the value is present or not.

Example:

<a href="pageOne.php?movingback=true">Go To Page One</a>


On the first page, check the presence of the movingback (I am using php to do the same)

<?php if(!isset($_GET['movingback']) || !$_GET['movingback']=='true')
echo "<a href='pagetwo.php'>Go To Page Two</a>"