About

Copies one list of forms to another list on checkbox being checked, and watches for changes while the checkbox is checked, maintaining the model state.

How To Use

Zip Download

First, include the jQuery library, and the plugin's JS in your page. You should load the JS at the bottom of the body, so it doesn't block content rendering.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript" src="FormCopy/scripts/formCopy.min.js"></script>

Then include the forms on the page that you want to open the fusebox on click or other input, and the content that you want it to open.

  <form id="testform">
    <div id="container1">
      Form1<br>
      <input value='1' type="text"><br>
      <input type="number"><br>
      <input class="nocopy" placeholder="nocopy" type="text"><br>
        <!--class nocopy stops an input from being grabbed by the getInputs fn,
          which prevents them from being watched/copied/copied to-->
      <input class="nocopy" placeholder="nocopy" type="text"><br>
      <input type="password"><br>
      <input type="checkbox"><br>
      <input type="radio" name="sex" value="male">Male<br>
      <input type="radio" name="sex" value="female">Female<br>
      <textarea></textarea><br>
      <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
      </select>
    </div>
    
    <div id="container2">
      Form2<br>
      <input value='1' type="text"><br>
      <input type="number"><br>
      <input type="password"><br>
      <input type="checkbox"><br>
      <input type="radio" name="sex2" value="male">Male<br>
      <input type="radio" name="sex2" value="female">Female<br>
      <input class="nocopy" placeholder="nocopy" type="text"><br>
      <input class="nocopy" placeholder="nocopy" type="text"><br>
      <textarea></textarea><br>
      <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
      </select>
    </div>
    
    <div style="clear:both"></div><br>
    
    <input type="submit" id="submitBtn">
  </form>

The getInputs function gets all inputs/select tags/textareas that do not have the class nocopy in the container that is passed into it.

<script>
$(document).ready(function(){
    CF.getInputs($('#container1')); //gets an array of inputs
});
</script>

The init function initializes the form watching and copying. It takes 5 required variables and one optional variable. The five required variables are jQuery objects. They are (in this order):

  1. The checkbox the activates the form watching and copying.
  2. The submit buttons for the form you are watching.
  3. The form you are watching.
  4. A list of inputs/selects/texteareas tags for the function to copy from.
  5. A list of inputs/selects/texteareas tags for the function to copy to.
The last variable is an optional callback function, which is called whenever the forms are copied from (whenever any of the "from" forms are changed/inputted into by the user).

<script>
  $(document).ready(function(){
      CF.init(
        $('#copyForms'),
        $('#submitBtn'),
        $('#testform'),
        CF.getInputs($('#container1')),
        CF.getInputs($('#container2'))
      );
  });
</script>
Demonstration(the second input is type="number", it will only copy numbers):
Same?

Form1






Male
Female

Form2




Male
Female




License

This plugin is not licensed. Use it as you will. Please don't claim my work as your own unless you modify it, but feel free to use it however you like.