• advanced forms
  • Copy Markup

advanced forms

Tailwind CSS Copy Markup

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

Require FlyonUI JS
Class Name
Type
Description
inputComponentBase class for input field.
selectComponentBase class for select field.

Default

Basic example

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

  • targetSelector: The element to be copied, specified by a CSS selector.
  • wrapperSelector: The element where the copied content is placed.
  • limit: The maximum number of times content can be copied.

In this setup, the “Add Technology” button copies the content from #content-for-copy into the #wrapper-for-copy container, allowing a maximum of three copies. If the limit is reached, further copies are not allowed.

Illustrations

With select

Below example shows copy markup with select.

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.

Below example shows copy markup with remove(delete) option.

Destroy/Reinitialize

The destroy method is provided to facilitate the destruction of a copy markup.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-copy-markupActivate a Copy Markup by specifying on an element.--
data-copy-markup-delete-itemDeletes targeted markup element on click.--
:targetSelectorSpecifies the target element to copy. The value must be a valid selector.string-
:wrapperSelectorSpecifies which element should be used for copying. The value must be a valid selector.string-
:limitSpecifies how many items you can copy until the button is disabled.numbernull

Methods

The HSCopyMarkup object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
delete(target)
Remove the element associated to the target.
  • target should be a Node.
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
HSCopyMarkup.getInstance(target, isInstance)
Returns the element associated to the target.
  • target should be a Node or string (valid selector).
  • isInstance boolean. Returns the instance instead of Node if true.

Method usage

Assign an ID to the button containing the data-copy-markup attribute, as demonstrated in the public method. To explore additional methods, you can copy them into the console.

Toggle the field to type text (public method).

// This method is used in above example.
const deleteBtn = document.querySelector('#delete-method')

deleteBtn.addEventListener('click', () => {
  const copyMarkup = new HSCopyMarkup(document.querySelector('#copy-method'))
  copyMarkup.delete(document.querySelector('#content-method-0'))
})

Toggle the field to type text (mixed).

const { element } = HSCopyMarkup.getInstance('#copy-method', true);
const deleteBtn = document.querySelector('#delete-method');

deleteBtn.addEventListener('click', () => {
  element.delete(document.querySelector('#content-method-0'));
});

Destroy instance.

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

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

Events

METHOD
DESCRIPTION
RETURNING VALUE
on:copyCalled after target element is copied.Copied element
on:deleteCalled after target element is deleted.Deleted element

Event usage

Assign an ID to the button containing the data-copy-markup attribute, and then use that ID to attach an event. The example below demonstrates a use case of event usage. You can view the output in the console.

Call any function on `copy` or `delete` example.

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)
})