icon_magic Copying Fields from One to Another: Magic JavaScript

Quick Jump ↵

Basic Usage
Example 1

when changing the first. To trigger the change, you must click outside of the field.

<input type="text" name="" value="" data-mjf="copy_fields" data-mjf_cf_on="change" data-mjf_cf_slaves="copy_onchange" id="copy_from_change">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_onchange" id="copy_to_change">

Example 2

when typing in the first.

<input type="text" name="" value="" data-mjf="copy_fields" data-mjf_cf_on="keyup" data-mjf_cf_slaves="copy_onkeyup" id="copy_from_keyup">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_onkeyup" id="copy_to_keyup">

Example 3

when typing in the first.

<input type="text" name="" value="" data-mjf="copy_fields" data-mjf_cf_on="keyup" data-mjf_cf_slaves="copy_onchange_2" id="copy_from_change_2">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_onchange_2" id="copy_to_change_2">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_onchange_2" id="copy_to_change_3">

Example 4

when focusing the first.

<input type="text" name="" value="green" data-mjf="copy_fields" data-mjf_cf_on="focus" data-mjf_cf_slaves="copy_onfocus" id="copy_from_focus">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_onfocus" id="copy_to_focus">

Example 5

when changing the drop down.

<select data-mjf="copy_fields" data-mjf_cf_on="change" data-mjf_cf_slaves="copy_select_onchange" name="" id="copy_from_change_select">
 <option value="red">red</option>
 <option value="blue">blue</option>
 <option value="purple">purple</option>
</select>
<input type="text" name="" value="" data-mjf_cf_slaves="copy_select_onchange" id="copy_to_change_select">

Example 6

to this when clicking the checkbox.

<input type="checkbox" name="" value="cards" data-mjf="copy_fields" data-mjf_cf_on="click" data-mjf_cf_slaves="copy_onclick2" data-mjf_cf_master="copy_from_click2_cards" id="copy_from_click2_cards">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_onclick2" id="copy_to_click2">

More Usage

You can also use other elements to trigger the copying. Instead of adding the attributes below to the master, add them to the field that will trigger the copy:

Example 7

Copy from this to this

<input type="text" name="" value="red" data-mjf_cf_slaves="copy_from_checkbox" id="copy_from_checkbox">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_from_checkbox" id="copy_to_checkbox">
<input type="checkbox" name="" value="" data-mjf="copy_fields" data-mjf_cf_on="click" data-mjf_cf_slaves="copy_from_checkbox" data-mjf_cf_master="copy_from_checkbox" id="copy_from_checkbox_link">

Example 8

Copy from this to this and this

<input type="text" name="" value="purple" data-mjf_cf_slaves="copy_from_checkbox_3" id="copy_from_checkbox_3">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_from_checkbox_3" id="copy_to_checkbox_3">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_from_checkbox_3" id="copy_to_checkbox_3b">
<input type="checkbox" name="" value="" data-mjf="copy_fields" data-mjf_cf_on="click" data-mjf_cf_slaves="copy_from_checkbox_3" data-mjf_cf_master="copy_from_checkbox_3" id="copy_from_checkbox_3_link">

Example 9

Copy from this to only this ... or to only this

<input type="text" name="" value="pink" data-mjf_cf_slaves="copy_from_checkbox_4" id="copy_from_checkbox_4">
<input type="text" name="" value="" data-mjf_cf_slaves="copy_from_checkbox_4" id="copy_to_checkbox_4">
<input type="checkbox" name="" value="" data-mjf="copy_fields" data-mjf_cf_on="click" data-mjf_cf_master="copy_from_checkbox_4" data-mjf_cf_slave="copy_to_checkbox_4" id="copy_from_checkbox_4_link">
<input type="text" name="" value="" id="copy_to_checkbox_4b">
<input type="checkbox" name="" value="" data-mjf="copy_fields" data-mjf_cf_on="click" data-mjf_cf_master="copy_from_checkbox_4" data-mjf_cf_slave="copy_to_checkbox_4b" id="copy_from_checkbox_4b_link">

Still More Usage

You can also copy a group of "masters" to a group of "slaves" from a trigger.

Example 10
<table>
 <tr>
  <td colspan="2">
   <input type="checkbox" name="" value="" data-mjf="copy_fields" data-mjf_cf_on="click" data-mjf_cf_m2s="billing2shipping" id="slave_to_slave_checkbox">
   <label for="slave_to_slave_checkbox">Copy first field set to second set</label>
  </td>
 </tr>
 <tr>
<td><input type="text" name="" value="Magic" data-mjf_cf_m2s="billing2shipping" data-mjf_cf_m2slave="slave_to_slave_1.b" id="slave_to_slave_1.a"></td>
<td><input type="text" name="" value="" id="slave_to_slave_1.b"></td>
 </tr>
 <tr>
  <td><input type="text" name="" value="JavaScript" data-mjf_cf_m2s="billing2shipping" data-mjf_cf_m2slave="slave_to_slave_2.b" id="slave_to_slave_2.a"></td>
  <td><input type="text" name="" value="" id="slave_to_slave_2.b"></td>
 </tr>
 <tr>
  <td><input type="text" name="" value="Framework" data-mjf_cf_m2s="billing2shipping" data-mjf_cf_m2slave="slave_to_slave_3.b" id="slave_to_slave_3.a"></td>
  <td><input type="text" name="" value="" id="slave_to_slave_3.b"></td>
 </tr>
</table>

Notes

« Back to the main documentation