Advanced forms

Copy Markup

The Copy Markup Component adds extra fields, like address entries, simplifying form expansion and making it ideal for dynamic surveys and registrations.

Default

Basic example

The `data-copy-markup` attribute defines the configuration for copying content. It has three key properties:

Which technologies have you primarily used? (Maximum three)

Illustrations

With select

Below example shows copy markup with select.

Options

Modals

Below example shows copy markup with select in modals.

With remove option

Add an attribute named `data-copy-markup-delete-item` to any button within a component identified by a specific ID. This attribute will enable the button to delete the component when clicked.

Which technologies have you primarily used? (Maximum three)

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a copy markup.

Which technologies have you primarily used? (Maximum three)

JavaScript behavior

Methods — Method usage

The `HSCopyMarkup` object is contained within the global `window` object.

Which technologies have you primarily used? (Maximum two)

JavaScript

const { element } = HSCopyMarkup.getInstance('#copy-markup', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy();
});

Events — Event usage

Which technologies have you primarily used? (Maximum two)

JavaScript

const el = HSCopyMarkup.getInstance('#copy-event')
const deleteBtn2 = document.querySelector('#delete-event')

deleteBtn2.addEventListener('click', () => {
  el.delete(document.querySelector('#content-event-0'))
})

el.on('copy', target => {
  console.log('target:', target)
})

el.on('delete', target => {
  console.log('target:', target)
})

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`input`	component	Base class for input field.
`select`	component	Base class for select field.