CODEWITHSUNDEEP
amp-html
Aquaholic
Aquaholic

Reputation: 883

AMP Equivalent of onchange window location URL

The following HTML code correctly takes the user to the URL specified in the "value" of "option" tag on a standard HTML webpage:

<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value=''>By Price Range ($)</option>
<option value='example.com/mobiles-1-20.php'>1 to 20</option>
<option value='example.com/mobiles-20-30.php'>20 to 30</option>
<option value='example.com/mobiles-30-50.php'>30 to 50</option>
</select>
</form>

However, the above is not compatible with AMP.

Does anyone know what is the AMP equivalent for the above form/option code? Basically, I am looking for a dropdown form. As soon as a user selects a value from that dropdown, they should be taken to that particular URL on a AMP compatible form.

Upvotes: 0

Views: 1372

Answers (1)

Nisarg
Nisarg

Reputation: 367

Try using navigateTo() on change event in AMP here is a sample code for the same.

<select name="sortBy" id="sortBy" class="optionSelectSort" on="change:AMP.navigateTo(url=event.value)">
                  <option value="/link" disabled selected>Default Sort </option>
                  <option value="/link?sortBy=title-ascending" >Alphabetically, A-Z</option>
                  <option value="/link?sortBy=title-descending" >Alphabetically, Z-A</option>
                  <option value="/link?sortBy=price-ascending" >Price, low to high</option>
                  <option value="/link?sortBy=price-descending" >Price, high to low</option>
                </select>

here is the reference link for the same navigationTo()
and check the example here

Upvotes: 1

Related Questions