0

I have a set of check input. Each one contains a unique ID. On checking box (on click) I want to get this ID and create a string of type '/some/path/?myids=checkOne,checkTwo (where checkOne and checkTwo are IDs of two different check input that have been clicked.

I understand that I can use state management - but my issue is: how can I limit how many checkboxes to create custom string for? For example, I want to have a limit of 5 comma separated IDs. Since AMP logic is limited I am not sure how to do complex logic with it.

Here are the steps:

  1. show set of checkboxes.
  2. user can click any of these checkboxes
  3. as user clicks on a checkbox, an achor tag href=... needs to be updated by appending the substring ?myids=checkOne.
  4. if user clicks on another checkbox then the href tag needs to be updated to this: ?myids=checkOne,checkTwo and so on until at the most 5 checkboxes are clicked.

Is this at all possible? Thanks

Documentation is not very clear on how to approx complex logic and not much found on searching.

Pippy Longstocking
  • 261
  • 5
  • 12

1 Answers1

0

One option is to use amp-selector and then limit the number of selected items when binding using .slice():

<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 limits the number of selected IDs to two and displays a warning if the user selected all three.

fstanis
  • 5,234
  • 1
  • 23
  • 42
  • unfortunately I MUST use checkboxes. Is there anything for that? thanks you for the response – Pippy Longstocking May 21 '19 at 23:38
  • You can use a normal `
    ` with checkboxes inside. This will effectively work the same as a link with a changing `href`, but you won't be able to limit the number of selected boxes client-side. You can also use `` and then write it out in JS. I think the best option is `` though, you can make the options look like checkboxes if that's the issue.
     – fstanis May 22 '19 at 13:04
  • Thank you - the issues with using is that each checkbox is part of a row in a table - they are not all part of the same group - apologies, I did not make that clear. So just imagine a table where the first cell is a checkbox, second row name, etc. – Pippy Longstocking May 22 '19 at 16:08
  • Ok so I realized I could wrap my entire table with - I see no errors. Going to try to get this working and will update you, thank you. – Pippy Longstocking May 22 '19 at 18:12
  • Hello - since slice() is called on an array that has nothing yet I get the following warning: Cannot invoke method slice on null; returning null. How can I prevent that? – Pippy Longstocking May 22 '19 at 20:22
  • You can initialize it by adding `` to your body. But that error should be safe to ignore. – fstanis May 22 '19 at 21:36
  • Updated the answer to include this. – fstanis May 22 '19 at 21:37
  • thank you so much for your help I got really far. Question - can you point me in the right direction to a URL where the AMP documentation explains functions like selected.slice(0, 2) or property.split ? – Pippy Longstocking May 22 '19 at 23:10
  • amp.dev lists the supported ones: https://amp.dev/documentation/components/amp-bind#expressions but if you're interested in how they work, since they are just JS functions, the best website is MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice – fstanis May 22 '19 at 23:17