How can I create a Repeatable form field in AMP?

12 Views Asked by At

I am creating an AMP form, where I want the users to add a list of elements, say advantage. I want the user to add each advantage in a separate input field so I can save it to the database. I think a repeatable field is the most appropriate input field for the user to add these details. However, I couldn't figure out how to create a working form field in AMP.

Here is the code I have attempted

<amp-form method="post" action-xhr="/submit-form" target="_top">
  <div id="input-container">
    <input type="text" name="input[]" required>
  </div>
  <button type="button" on="tap:AMP.setState({count: count + 1})">Add field</button>
  <input type="submit" value="Submit">
  <amp-state id="state">
    <script type="application/json">
      { "count": 1 }
    </script>
  </amp-state>
  <amp-list id="list" items="." single-item>
    <template type="amp-mustache">
      <div>
        <input type="text" name="input[]" required>
      </div>
    </template>
  </amp-list>
</amp-form>

The above code could only increase the count when the button is clicked. Need help with appending the input field based on the count.

0

There are 0 best solutions below