Search code examples
amp-html

AMP reset selected option after user hits back button

I use standard select code. On select it shows another elements based on value.

<select on="change:AMP.setState({ option: event.value })">
<option value="0" >choose</option>
<option value="9">blue</option>
<option value="10">brown</option>
<option value="11">green</option>
</select>

<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 9" href="/link1">link1</a>
<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 10" href="/link2">link2</a>
<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 11" href="/link3">link3</a>

My problem: Visitor can choose option, link is then unhidden based on selection. After click on link, user goes to another page. After hitting back button, the option is still selected (that would be ok), however, all buttons are hidden as if option 0 was selected.

I tried using "selected" on option 0 but it does not stay after hitting back button.

Thank you for help.

Solution

  • Whenever users click the "Back" button they access a weird browser cache which caches form elements like inputs, selects, etc.

    To reverse it, set the default value of the select when users click on the link.

    You assign the selectedOption variable the value of 1 which then the [selected] amp-bind attribute checks and if it is higher than 0 it sets the select to choose just before the user it redirected, so when they hit "back" it is in its default state. 

    
  <select on="change:AMP.setState({ option: event.value })">
<option value="0" selected [selected]="selectedOption > 0 ">choose</option>
<option value="9">blue</option>
<option value="10">brown</option>
<option value="11">green</option>
</select>

<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
   rel="nofollow" 
   class="button addtocart"  href="https://example.com"
   hidden="" 
   [hidden]="option != 9" >link1</a>
<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
   rel="nofollow" class="button addtocart" href="https://example.com"
   hidden="" [hidden]="option != 10" >link2</a>
<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
   rel="nofollow" 
   class="button addtocart" href="https://example.com"
   hidden="" [hidden]="option != 11" >link3</a>

    I only manage to get it to work on the first "back" button, so if the user clicks "back" the first time, the select is refreshed, if they click it twice, it is not, but hopefully it will help you.