icon_magic New Form Fields (): Magic JavaScript

Quick Jump ↵

Creating new form fields on the fly

Usage
  • The required data-mjf_nff attributes are:
    • tag:
      • input
      • textarea
    • If tag:input, type:
      • text
      • radio (will prompt for value)
      • checkbox (will prompt for value)
      • file
    • name:
      • NEW_FIELD_NAME
    • parent:
      • NEW_FIELD_PARENT_ID
  • The optional data-mjf_nff attributes are:
    • label: (will prompt for value)
      • before
      • after
    • br_after_label
      • 1
      • 2
      • etc.
    • br_after_field
      • 1
      • 2
      • etc.
    • Any other form field attributes you may want to include:
      • class:input_text
      • id:my_new_field (if the id already exists, a random number will be appended)
      • value:my new value
      • rows:5
      • checked:checked
      • size:25
      • data-mjf:field_required
Example 1

Label followed by a line-break, followed by an input=text followed by two line-breaks → create

<a href="#" data-mjf_nff="tag:input|type:text|value:hi there|name:new_input|id:new_field|class:input_text|label:before|br_after_label:1|br_after_field:2
|parent:add_new_input_field_parent">TITLE</a>

Output → <label><br><input type="text"><br><br>

Example 2

Label followed by an input=text followed by a line-break → create

<a href="#" data-mjf_nff="tag:input|type:text|value:hi|name:new_input|id:new_field_2|class:input_text_small|label:before|br_after_field:1
|parent:add_new_input_field_parent_2">TITLE</a>

Output → <label><input type="text"><br><br>

Example 3

Input=checkbox followed by a label followed by a line-break → create

<a href="#" data-mjf_nff="tag:input|type:checkbox|name:new_checkbox|id:new_checkbox|class:input_checkbox|label:after|br_after_field:1
|parent:add_new_checkbox_field_parent">TITLE</a>

Output → <input type="checkbox"><label><br>

Example 4

Input=radio followed by a label followed by two line-breaks → create

<a href="#" data-mjf_nff="tag:input|type:radio|name:new_radio|id:new_checkbox|class:input_radio|label:after|br_after_field:1
|parent:add_new_radio_field_parent">TITLE</a>

Output → <input type="radio"><label><br><br>

Example 5

Input=file followed by a line-break → create

<a href="#" data-mjf_nff="tag:input|type:file|name:new_file|id:new_file|class:input_file|br_after_field:1
|parent:add_new_file_field_parent">TITLE</a>

Output → <input type="file"><br>

Example 6

Textarea followed by two line-breaks → create

<a href="#" data-mjf_nff="tag:textarea|name:new_textarea|id:new_textarea|class:input_textarea|rows:4|cols:7|br_after_field:2
|parent:add_new_textarea_field_parent">TITLE</a>

Output → <textarea><br><br>

Notes
Change Log

→ 12.1.31

« Back to the main documentation