Is there a way to extract the ID or other attributes from a clicked element using AMP HTML and incorporate them to generate a URL for an anchor tag?

I have a collection of checkboxes, each with its own unique ID. When a checkbox is clicked, I need to extract the ID and generate a string like '/some/path/?myids=checkOne,checkTwo' (where checkOne and checkTwo are IDs of two different checkboxes that have been selected).

While I understand that state management can be used for this, my challenge lies in limiting the number of checkboxes that contribute to creating the custom string. Specifically, I want to restrict it to only include 5 comma-separated IDs. Due to the constraints of AMP logic, implementing this level of complexity is proving difficult.

The process should follow these steps:

  1. Display a set of checkboxes.
  2. Allow users to select any checkbox.
  3. Upon clicking a checkbox, update an anchor tag href attribute by adding the substring '?myids=checkOne'.
  4. If another checkbox is clicked, update the href tag to include additional IDs, such as '?myids=checkOne,checkTwo', and continue up to a maximum of 5 selected checkboxes.

Is this achievable? Thank you for your help.

Unfortunately, the documentation does not provide clear guidance on handling complex logic within AMP, and limited resources were found through searching online.

Answer №1

To restrict the number of chosen items, you can utilize amp-selector. By employing .slice() while binding, you can achieve this:

<amp-state id="selected">
  <script type="application/json">[]</script>
</amp-state>

<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
  <div option="1">First</div>
  <div option="2">Second</div>
  <div option="3">Third</div>
</amp-selector>

<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
<a href="/?ids=" [href]="'/?ids=' + selected.slice(0, 2)">Click me</a>

This method ensures that no more than two IDs are picked and notifies the user if all three are chosen.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty in displaying Font Awesome Unicode on website

I am struggling to populate a list with Font Awesome icons 4.7.0 in my HTML code using Bootstrap. Strangely, only the first icon is displayed while the rest remain invisible. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- ...

Press the vertical navigation bar

My website is currently undergoing a major overhaul. I am looking to enhance its functionality, but I may have taken on more than I can handle. You can find the link related to my query here: On my top menu, there is a button located on the left side. It ...

Issue with Express.js: "opencv" module not found within a Docker container

Currently, I am in the process of setting up the OpenCV bindings for NODE to enable AI functionality on my express server. For this purpose, I am utilizing the Peter Braden Library - https://github.com/peterbraden/node-opencv. However, I am encountering a ...

Is there a way to make the sidepanel appear and be edited with just one click on a Chrome extension, instead of the current two-click requirement?

Currently, I am in the process of developing a Chrome dictionary game extension. In the initial phase of the project, the user should have the ability to right-click on a word, triggering the display of a side panel containing definitions sourced from a lo ...

The Three.JS Library Offers Dark and Mysterious Textures

I am facing an issue with a model that I created in Blender 2.76b and exported to json for use with three.js 71. When viewed in Blender, the model looks fine. However, when displayed in webGL, the model appears completely black. I suspect that it might hav ...

Adjusting the content within a text area using an AngularJS service

I am currently editing text in a textarea within the admin view and I would like to display it through an angular service on the user view. However, I want the text to be displayed in multiple rows, maintaining the same format that I entered in the textare ...

What is the most efficient way to load a PHP page once the webpage has completely finished loading?

I'm relatively inexperienced when it comes to PHP and JQuery, so please bear with me if my knowledge is limited. Currently, I'm facing an issue where loading a small HTML table that contains information queried from game servers (like shown in t ...

Using Vue.js to handle asynchronous functions with undefined variables

My Vue.js application is facing a problem where an async function is passing a variable as undefined even though it's properly defined before the function call. The async function FETCH_DATA in my Vue.js application is defined like this: async [FETCH ...

How to showcase a specific row in a React Native ListView for displaying highscores in a game

Currently, I am working on programming a Highscore Screen for a Quiz Game that utilizes a ListView to display all the players along with their scores. My main goal is to emphasize my own points, since the ListView only shows player IDs and points without a ...

How to upload a multipart form with JSON and file using Dojo's XHR functionality

I've been struggling to find a solution for this issue. The closest I found was a thread on Stack Overflow about composing multipart/form-data with different Content-Types, but it didn't fully address my problem. Here's the situation - I ha ...

Display the item request form whenever a selection of an unidentified item is made using select2

I want to implement select2 for a company search feature. In case the desired company is not available in the existing dataset, I need to provide an option for users to request adding the company data. This is the HTML code: <head> <link href=& ...

Creating PHP functions that return a JSON string when invoked - a simple guide

I have created a script that contains various functionalities, including fetching data from a database and encoding it into JSON. However, I want to be able to call different functions to execute these scripts separately. When I attempted to define and c ...

The XML request fails to retrieve any output from the PHP script

I am seeking tools to enable the calling of .php from .html files. Here is an issue: while this example successfully works in a .php file: <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> &l ...

A guide on retrieving data from an API and displaying it using AngularJS

REACT $state.saveData= function(productfilter){ var url = CONFIG.apiUrl + '/product'; window.open(url); window.print(url); }; CSS <button onClick="saveData(productfilter)" type="button">Print</button> ...

Can someone show me how to create an Array of Buttons using JavaScript? Also, I'm looking for guidance on how to generate random images using this code

Currently, I am working on creating a Memory Game. My main focus right now is setting the card images randomly, but for some reason, my code only displays the top image. var images = ["url(IMG1.jpg)","url(IMG2.jpg)"...]; var randomIMG =0; var card = "< ...

What is the best way to invoke a TypeScript function within an HTML document?

Can anyone guide me on how to import a TypeScript function into an HTML file and then call it? I'm a bit confused about the process. Below is my attempt in index.html to call the function getJSON() <!DOCTYPE html> <html lang="en"> < ...

Tips for switching back and forth between two classes using jQuery?

I'm having some trouble with the toggleClass function. It doesn't seem to be working correctly for me. The image should toggle between displaying and hiding, but it only changes to hide, not back again. You can view my example here, along with t ...

Unable to obtain the accurate response from a jQuery Ajax request

I'm trying to retrieve a JSON object with a list of picture filenames, but there seems to be an issue. When I use alert(getPicsInFolder("testfolder"));, it returns "error" instead of the expected data. function getPicsInFolder(folder) { return_data ...

Deleting items from an array in ReactJS

When retrieving a list of users from AWS Cognito, everything works flawlessly. However, the task of iterating over this array and removing users that do not match a specific Client ID is where I'm facing difficulties. What am I doing wrong in this sc ...

Assessing personalized directive attributes

I am currently working on a custom directive that will activate a specified event when a particular expression evaluates as true. The code below demonstrates how it can be achieved when binding a single value- <div ng-trigger="value.someBoolean" /> ...