moj-frontend icon indicating copy to clipboard operation
moj-frontend copied to clipboard

Add another documentation isn't led by progressive enhancement

Open gregtyler opened this issue 1 year ago • 0 comments

The Add another documentation and example are designed so that JavaScript is required. It mentions this:

The add another component relies on JavaScript. When JavaScript is not available, your page should reload with the additional form elements if the "Add another" button is pressed.

In real services we require all functionality to work without JavaScript, so this is not sufficient and we should update the documentation to start from a server-side approach and add the JavaScript functionality as a progressive enhancement.

The main changes needed to the example itself are:

  • Add a remove button with class moj-add-another__remove-button (JS doesn't add a new one if it already exists)
  • Add suitable name attributes to buttons so that the server-side can hook in

We should then document the server-side logic required, and then introduce what adding the JS functionality does.

I've set up an example project in Glitch to demo working server-side functionality.

gregtyler avatar Jan 10 '24 11:01 gregtyler