Quick Jump ↵
Add <script type="text/javascript" src="/PATH/TO/magic/tricks/new_form_fields/new_form_fields..js" charset="UTF-8"></script> below your <script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>
<script type="text/javascript" src="/PATH/TO/magic/tricks/new_form_fields/new_form_fields..js" charset="UTF-8"></script>
<script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>
Add data-mjf="new_form_fields|return_false" data-mjf_nff="tag:input|type:FIELD_TYPE|name:NEW_FIELD_NAME|parent:NEW_FIELD_PARENT_ID" id="ELEMENT_ID" to your <a> tag.
data-mjf="new_form_fields|return_false" data-mjf_nff="tag:input|type:FIELD_TYPE|name:NEW_FIELD_NAME|parent:NEW_FIELD_PARENT_ID" id="ELEMENT_ID"
<a>
The required data-mjf_nff attributes are:
data-mjf_nff
tag:
input
textarea
tag:input
type:
text
radio
checkbox
file
name:
NEW_FIELD_NAME
parent:
NEW_FIELD_PARENT_ID
The optional data-mjf_nff attributes are:
label
before
after
br_after_label
1
2
br_after_field
class:input_text
id:my_new_field
id
value:my new value
rows:5
checked:checked
size:25
data-mjf:field_required
Add <script type="text/javascript">$m.trick.new_form_field = true;</script> inside your <body> tag.
<script type="text/javascript">$m.trick.new_form_field = true;</script>
<body>
Use the examples below as a guide for building your own!
A label followed by a line-break, followed by an input=text followed by two line-breaks → create
input=text
<a href="#" data-mjf="new_form_fields|return_false" data-mjf_nff="tag:input|type:text|value:hi there|name:new_input|id:new_field|class:input_fld input_text|label:before|br_after_label:1|br_after_field:2|parent:add_new_input_field_parent" id="add_new_input_field">TITLE</a>
Outputs → <label><br><input type="text"><br><br>
<label><br><input type="text"><br><br>
A 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" id="add_new_input_field_2">TITLE</a>
Outputs → <label><input type="text"><br><br>
<label><input type="text"><br><br>
An input=checkbox followed by a label followed by a line-break → create
input=checkbox
<a href="#" data-mjf_nff="tag:input|type:checkbox|name:new_checkbox|id:new_checkbox|class:input_checkbox|label:after|br_after_field:1parent:add_new_checkbox_field_parent" id="add_new_checkbox_field">TITLE</a>
Outputs → <input type="checkbox"><label><br>
<input type="checkbox"><label><br>
An input=radio followed by a label followed by two line-breaks → create
input=
<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" id="add_new_radio_field">TITLE</a>
Outputs → <input type="radio"><label><br><br>
<input type="radio"><label><br><br>
An input=file followed by a line-break → create
input=file
<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" id="add_new_file_field">TITLE</a>
Outputs → <input type="file"><br>
<input type="file"><br>
A 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" id="add_new_textarea_field">TITLE</a>
Outputs → <textarea><br><br>
<textarea><br><br>
The order of the data-mjf_nff attributes is irrelevant.
prompt
lang : "en_us"
« Back to the main documentation
New Form Fields (): Magic JavaScript