Copying Fields from One to Another: Magic JavaScript

Basic Usage

Add data-mjf="copy_fields" data-mjf_cf_on="click(OR)change(OR)focus(OR)etc" data-mjf_cf_slaves="SLAVE_GROUP" to the field that has the value to copy from (master).

Add data-mjf_cf_slave="SLAVE_ID" to the field to copy to (slave).

Add <script type="text/javascript">$m.wand.copy_fields = true;</script> inside your <body> tag.

Examples

Copy from this to this 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">

Copy from this to this 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">

Copy from this to this and to this 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">

Copy from this to this 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">

Copy from this to this 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">

Copy from this value=cards 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">

Copy from this to this when clicking 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">

Copy from this to this and this when clicking 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">

Copy from this to only this when clicking this ... or to only this when clicking 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">

Copy first field set to second set

<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

Add data-mjf_cf_only_empty="true" to the "copy to" field if you only want to the copy to happen if the "copy to" field is blank.

Look at the example code to see how they work and for other ideas and possibilities.

« Back to the main documentation